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

【问题标题】：pass element ref to a method in angular2将元素 ref 传递给 angular2 中的方法
【发布时间】：2018-07-19 21:59:50
【问题描述】：

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

插件所做的是，只要卡片位于窗口底部，它就会返回 true。我希望卡片应该位于中心或至少在我注册印象之前靠近窗口顶部. 为此，我需要当前元素的引用并将其与窗口高度和 Yoffset 进行比较，例如 this(最后一个解决方案)。

下面是我的代码中的一个小 sn-p 和我的回调。

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

我怎样才能做到这一点。欢迎任何建议、方法或指导！

谢谢

【问题讨论】：

哪个div？你期待吗？
我正在使用插件 snInViewport 的那个
检查this问题。它与您的非常相似。

标签： angular element viewport

【解决方案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

【讨论】：

嗨，refEl 可以是动态的吗？这个 li 使用 ngFor 重复
@ShrutiNair ，是的，它会将 ref 从函数传递给当前元素
怎么做。我已经用 sn-p 更新了答案，你能检查一下吗？使用#data_{{data.Id}}
不确定这是否按预期工作。如果您以这种方式使用 ElementRef 更改代码 -> checkEl(el: ElementRef) { console.log(el.nativeElement); } 未定义