Question

如何在Angular 2中删除 @Hostlistener（），就像在Native JS中使用 removeEventListener 一样？

示例： 我的页面中有很多dropDown组件。当dropDown打开时，我想在文档点击事件上添加处理程序，并在dropDown关闭时删除处理程序。

原生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?

Answer 1

Julia Passynkova答案几乎是正确的。

只需删除＆＃34;文档＆＃34;周围的引号，如下所示：

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

// unsubscribe
this.handler();

Answer 2

您可能需要手动添加/删除侦听器

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

// unsubscribe
this.handler();

Answer 3

在这里查看我的答案以获取另一条提高性能的途径，而不必处理删除@Hostlistener的问题 Detect click outside Angular component

Answer 4

我管理的最好的方法是实质上添加/删除附加到侦听器的方法。

首先设置侦听器：

@HostListener('document:click', ['$event'])
handler(event: any) : void {};

然后插入适合您解决方案的代码：

//add handler
this.handler = function(event: any) : void {
    // do something
}

//remove handler
this.handler = function() : void {};

Angular 2.删除@Hostlistener（）

4 个答案: