我必须检查列表中的元素是否在视口内.为此我使用的是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>
组件侧(与上面相同)：
