javascript - Angular 2。移除 @Hostlistener()

我如何在 Angular 2 中移除 @Hostlistener()，就像在原生 JS 中使用 removeEventListener 一樣？

範例： 我的頁面中有許多下拉選單元件。當下拉選單打開時，我想在文件點擊事件上添加處理器，並在下拉選單關閉時移除處理器。

原生 JS：

function handler(){
  //do something
}
document.addEventListener('click', handler); // add handler
document.removeEventListener('click', handler); // remove handler

Angular 2：

  @HostListener('document: click') onDocumentClick () {
    // do something
  }

  // How can I remove handler?

答案＃1

茱莉亞·帕辛科娃的答案幾乎是正確的。

只需移除「document」周圍的引號，就像這樣：

// subscribe
this.handler = this.renderer.listen(document, "click", event =>{...});

// unsubscribe
this.handler();

註解：

我覺得 @Smiranin 的評論相當有用。由於 Angular 2 使用 Rxjs，一個更好的方法是為這類事件創建一個專用服務，並在其上公開 subjects。然後組件可以消費 subjects 的事件流，從而產生相同的行為。這將使代碼更加解耦、更容易測試，並對 API 變更更具魯棒性。

答案＃2

你可能需要手動添加/移除監聽器

// subscribe
this.handler = this.renderer.listen('document', "click", event =>{...});

// unsubscribe
this.handler();