Angular 2. 移除@Hostlistener()

Question

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

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

原生JS：

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

角度 2：

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

  // How can I remove handler?

Answer 1

Julia Passynkova 答案几乎是正确的。

只需删除“文档”周围的引号，如下所示：

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

// unsubscribe
this.handler();

注解：

我发现@Smiranin 评论非常有用。 由于 Angular 2 使用 Rxjs，更好的方法是为这些类型的事件创建专用服务并在其上公开主题。 组件然后可以使用导致相同行为的主题事件流。 这将使代码更加解耦，更易于测试并且对 API 更改更健壮。

Answer 2

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

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

// unsubscribe
this.handler();

Answer 3

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

首先设置监听器：

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

然后根据您的解决方案插入此代码：

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

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

Answer 4

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

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

原生JS：

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

角度 2：

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

  // How can I remove handler?