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
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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Einfach :
- Vorlage-Seite :
Komponente Seite :
------------------------ ODER --------------------------
- Vorlage-Seite :
Komponente Seite (Gleiche wie oben):
ARBEITEN DEMO
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?
InformationsquelleAutor Vivek Doshi