web-dev-qa-db-ja.com

Angular2のメソッドに要素refを渡します

リスト内の要素がビューポート内にあるかどうかを確認する必要があります。このために、angular2プラグイン angular-inviewport を使用しています。

プラグインが行うことは、カードがウィンドウの下部に近づくとすぐにtrueを返すことです。このためには、現在の要素の参照が必要で、ウィンドウの高さとYoffset this （the last solution）のようなものと比較します。

以下は私のコードと私が持っているコールバックからの小さなスニペットです。

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

動的参照を追加してみました

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

これが正しいかどうかわかりません。

HandlerFunction内では、div参照も必要です。

どうすればこれを達成できますか？提案、アプローチ、またはガイダンスは大歓迎です！

ありがとう

angularelementviewportimpressions
13
Shruti Nair

単に行う：

テンプレート側：

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

コンポーネント側：

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

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

テンプレート側：

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

コンポーネント側（上記と同じ）：

WORKING DEMO

31
Vivek Doshi