将元素引用传递给 angular2 中的方法

Question

我必须检查列表中的元素是否在视口内或 not.For 我正在使用 angular2 插件 angular-inviewport。

插件所做的是，一旦卡片位于 window 的底部，它 return true.I 希望卡片应该位于中心或至少有点在我注册印象之前，靠近 window 的顶部。为此，我需要当前元素的参考并将其与 window 高度和 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: HTMLElement){
  console.log(el); // you can check the output in the console
}

------------------------ 或者---------------- ----------

模板端：

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

组件端（同上）：

WORKING DEMO

将元素引用传递给 angular2 中的方法

pass element ref to a method in angular2

element

viewport

angular