Angular 2.删除@Hostlistener（）

Question

我如何像在本机JS中使用的removeEventListener一样，在Angular 2中删除@Hostlistener（）？

示例： 页面中有很多dropDown组件。当dropDown打开时，我想在document click事件上添加处理程序，并在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

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

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

// unsubscribe
this.handler();

Answer 2

朱莉娅·帕森科娃（Julia Passynkova）答案几乎是正确的。

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

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

// unsubscribe
this.handler();

注解：

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