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

发布时间：2020-12-17 18:01:33 所属栏目：安全来源：网络整理

导读：我必须检查列表中的元素是否在视口内.为此我使用的是angular2插件 angular-inviewport. 插件的作用是,一旦卡片在窗口底部,它就会返回true.我希望在注册印象之前,卡片应位于窗口中央或至少稍微接近窗口顶部. 为此我需要当前元素的引用并将其与窗口高度和Yoffs

我必须检查列表中的元素是否在视口内.为此我使用的是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引用.

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

谢谢

解决方法

简单地说：

模板面：

<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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!