Angular - 監聽特定的 DOM 插入，然后監聽滾動事件

Question

假設這是一個小部件元素的 HTML：

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

我想聽那個被添加到 DOM 的小部件（最好通過 html 類來捕捉它）。 當它被添加時，我想監聽一個滾動事件（鼠標滾輪或下拉滾動器），這樣當用戶滾動時，小部件就會從 DOM 中刪除。

我聽說過各種實現，包括使用document.queryselector() 、 @HostListener 、事件發射器、 ngDoCheck等。我正在尋找一種對性能影響最小的實現，最好都在我的 angular 組件中，我們稱之為我的MyComponent 。

編輯：我正在處理的應用程序是一個大型企業應用程序

編輯 2：我無權訪問小部件的 Angular 組件，這就是為什么我不能使用@ViewChild ，所以我能抓住它的唯一方法是在它被添加到 DOM 時使用它的 class 名稱。 點擊圖標后顯示小部件； 我也找不到圖標的 onclick 事件處理程序。

Answer 1

您可以通過事件委托來做到這一點。 將滾動偵聽器分配給文檔，然后搜索並刪除您的 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>

Angular - 監聽特定的 DOM 插入，然后監聽滾動事件

問題描述

1 個解決方案

解決方案1
0 2019-11-15 14:48:42

Angular - 監聽特定的 DOM 插入，然后監聽滾動事件

問題描述

1 個解決方案

解決方案1 0 2019-11-15 14:48:42

解決方案1
0 2019-11-15 14:48:42