将元素ref传递给angular2中的方法

Question

我必须检查列表中的元素是否在视口内.为此我使用angular2插件angular-inviewport.

插件的作用是,一旦卡片在窗口底部,它就会返回true.我希望在注册印象之前,卡片应位于窗口中央或至少稍微接近窗口顶部.为此,我需要当前元素的引用,并将其与窗口高度和Yoffset进行比较,如下所示(最后一个解决方案).

下面是我的代码中的一小段代码和我的回调.

    <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引用.

我怎样才能做到这一点.欢迎任何建议,方法或指导!

谢谢

Answer 1

简单地说:

模板面:

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

组件方面:

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

- - - - - - - - - - - - 要么 - - - - - - - - - - - - - -

模板面:

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

组件侧(与上面相同):

工作演示