时间戳

首页 > 解决方案 > Angular - 监听特定的 DOM 插入，然后监听滚动事件

javascript - Angular - 监听特定的 DOM 插入，然后监听滚动事件

问题描述

假设这是一个小部件元素的 HTML：

<div class = "a b">
     <div class = "c d e">
     </div>
</div>

我想听那个被添加到 DOM 的小部件（最好通过 html 类捕获它）。当它被添加时，我想监听一个滚动事件（鼠标滚轮或下拉滚动器），这样当用户滚动时，小部件就会从 DOM 中删除。

我听说过各种实现，包括 using document.queryselector()、@HostListener、事件发射器ngDoCheck等。我正在寻找一种对性能影响最小的实现，最好是在我的角度组件内，我们称之为MyComponent。

编辑：我正在处理的应用程序是一个大型企业应用程序

编辑 2：我无权访问小部件的 Angular 组件，这就是为什么我不能使用@ViewChild，所以我能抓住它的唯一方法是在它添加到 DOM 时通过它的类名。点击图标后显示小部件；我也找不到图标的 onclick 事件处理程序。

标签： javascriptangulartypescriptdomtypescript2.0

解决方案

您可以通过事件委托来做到这一点。将滚动侦听器分配给文档，然后搜索并删除您的 div（如果存在）。

let new_div = document.createElement('div');
new_div.id = 'your_widget';
new_div.style.height = '5000px';
new_div.innerText = "hello";
document.body.appendChild(new_div);

document.addEventListener('scroll', (e)=>{
    if(document.querySelector('#your_widget')){
        document.querySelector('#your_widget').remove();
    }
})
<body></body>

推荐阅读