Angular：檢測重複對象中菜單項外部點擊的最佳做法

Question

我們可以在HostListner中使用Angular的Detect click outside element? 。

在我的組件中，我註冊了一個監聽文檔的主機偵聽器，並在組件內隱藏菜單。這種方法適用於單個組件。 但是，當組件實例化（在列表中）時，我有點擔心每個組件在點擊時註冊文檔100次，並執行一些處理以隱藏從其組件打開的菜單（如果有）。

我可以將代碼移到組件列表的外面，但是我需要持有每個組件的引用以檢測哪個已打開菜單並應該關閉。

這兩種方法都不是完美的，有沒有其他的方式來有效地處理這個問題，以及在其父代中不泄露組件代碼？

Answer 1

不是在組件上設置HostListener，而是在指令中使用它，並將其設置在該組件的包裝器上。如果你不想修改模板，包裝可能是ng-container。