web-dev-qa-db-fra.com

passer l'élément ref à une méthode en angular2

Je dois vérifier si un élément dans une liste est dans la fenêtre d'affichage ou non.Pour cela, j'utilise le plugin angular2 angular-inviewport .

Ce que le plugin fait est dès que la carte est en bas de la fenêtre, il retourne vrai.Je veux que la carte soit au centre ou au moins un peu près du haut de la fenêtre avant d'enregistrer l'impression. Pour cela, j'ai besoin de la référence de l'élément actuel et de le comparer avec la hauteur de la fenêtre et quelque chose comme Yoffset this (la dernière solution).

Ci-dessous est un petit extrait de mon code et du rappel que j'ai.

    <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>

même essayé d'ajouter une référence dynamique

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

Je ne sais pas si c'est correct.

Dans la fonction handlerFunction, je veux également la référence div.

Comment puis-je atteindre cet objectif. Toute suggestion, approche ou orientation est la bienvenue!

Merci

angularelementviewportimpressions
13
Shruti Nair

Faites simplement:

Côté modèle: 

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

Côté composant: 

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

------------------------ OR ------- -------------------

Côté modèle: 

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

Côté composant (comme ci-dessus):

DEMO DE TRAVAIL

31
Vivek Doshi