Question

我必须检查列表中的元素是否在视口内。对于这个我使用angular2插件angular-inviewport。

插件的作用是，一旦卡片在窗口底部，它就会返回true。我希望卡片应该在中心或者至少有点靠近窗口顶部才能注册印象。为此我需要当前元素的引用，并将其与窗口高度和Yoffset进行比较，如this（最后一个解决方案）。

以下是我的代码中的一小段代码和我的回调。

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

组件方面（与上述相同）：

<强> WORKING DEMO

将元素引用传递给angular2

1 个答案: