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

我该如何实现。 欢迎任何建议、方法或指导！

谢谢

- Shruti Nair

---

你期望的是哪个div？ - Aravind

我正在使用插件snInViewport。 - Shruti Nair

请查看此问题的链接。它与您的问题非常相似。 - Makla

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>

组件面（与上面相同）：

工作演示

- Vivek Doshi

---

可以使用动态的refEl吗？这个li元素是通过ngFor重复的。 - Shruti Nair

@ShrutiNair，是的，它将从函数传递对当前元素的引用。 - Vivek Doshi

这该怎么做呢？我已经在答案中更新了一个片段，你能检查一下吗？使用 #data_{{data.Id}}。 - Shruti Nair

@ShrutiNair，不需要做#data_{{data.Id}}，你可以通过ViewChildren访问所有引用，这将使您访问所有引用。 - Vivek Doshi

不确定此代码是否按预期工作。如果您使用 ElementRef 改变代码的方式是这样的 -> checkEl(el: ElementRef) { console.log(el.nativeElement); } ，则会得到 undefined。 - DevT