pass-element ref auf eine Methode in angular2

Habe ich zu überprüfen, ob ein element in einer Liste innerhalb des Arbeitsbereichs oder nicht.Für diese bin ich mit dem angular2 plugin Winkel-inviewport.

Was das plugin macht ist, sobald die Karte ist in den unteren Rand des Fensters, die es true zurück.Ich will, dass, sollte die Karte in der Mitte oder zumindest etwas in der Nähe der Spitze der Fenster, bevor ich mich den Eindruck.
Dafür muss ich den Bezug auf das aktuelle element und vergleichen es mit dem Fenster Höhe und Yoffset etwas wie diese(Letzte Lösung) .

Unten ist ein kleiner Ausschnitt aus meinem code und das callback, das ich habe.

    <li class="" *ngFor="let data of dataArray; let i=index;">
         <div id="data{{data.Id}}" snInViewport (inViewportChange)="handlerFunction($event,data)" class="card m-b-" style="height:auto;">
        </div>
   </li>

sogar versucht, hinzufügen von dynamischen ref

<div #data_{{data.Id}} id="data{{data.Id}}" snInViewport (inViewportChange)="handlerFunction($event,data)" class="card m-b-" style="height:auto;">

Nicht sicher, ob dies korrekt ist.

Innerhalb der handlerFunction ich möchte die div-Referenz auch.

Wie kann ich das erreichen.
Jeder Vorschlag,den Ansatz oder Anleitung ist herzlich willkommen!

Dank

  • welche div? Euch erwarten?
  • an dem bin ich mit dem plugin snInViewport
  • Prüfen Sie auch, this Frage. Es ist sehr ähnlich zu verkaufen.
InformationsquelleAutor Shruti Nair | 2018-02-09
  1. 26

    Einfach :

    - Vorlage-Seite :

    <div #refEl (click)='yourFunc(refEl)'>

    Komponente Seite :

    yourFunc(el){
  console.log(el); //you can check the output in the console
}

    ------------------------ ODER --------------------------

    - Vorlage-Seite :

    <div (click)='yourFunc($event.target)'></div>

    Komponente Seite (Gleiche wie oben):

    ARBEITEN DEMO

    • hi,kann der refEl dynamisch sein.Dieses li ist wiederholt mit ngFor
    • ja, es werden an den ref, um das aktuelle element aus der Funktion
    • Wie kann das getan werden.ich habe aktualisiert, Antwort mit ein snippet kann man prüfen? mit #data_{{data.Id}}
    • es gibt keine Notwendigkeit zu tun, #data_{{data.Id}} ist , dann haben Sie Zugriff auf alle ref über ViewChildren, das Ihnen Zugriff auf alle Referenzen .
    • Würde diese Arbeit für eine eigene Eingabe, die Einbettung in die übergeordnete Komponente mehrere Male, so dass ich kann ein anderes element ref für jeden Eingang?
    • es wird funktionieren
    • wie kann ich diese option verwenden, um einen bestimmten input und erhalten Ihren Wert über eine Taste, nicht die Eingabe selbst? Ich habe ein input-element als Kind Komponente und es wird gebunden in einer übergeordneten Komponente mit ngFor. So ElementRef sollten dynamisch erzeugt werden, für jedes element Ziel jede Eingabe und erhalten den Wert.
    • Nicht sicher, ob dies funktioniert, wie erwartet. Wenn Sie den code ändern mit ElementRef in diesem Weg -> checkEl(el: ElementRef) { console.log(el.nativeElement); } bekommt undefined
    • Bitte überprüfen Sie die demo, ich habe beide Möglichkeiten :).

    InformationsquelleAutor Vivek Doshi
Schreibe einen Kommentar