Angular 2. 删除 @Hostlistener()

Posted 2023-03-05

【中文标题】Angular 2. 删除 @Hostlistener()

【英文标题】：Angular 2. Remove @Hostlistener()

【发布时间】：2017-09-24 08:54:34

【问题描述】：

如何在 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

Angular 2：

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

  // How can I remove handler?

【参考方案1】：

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

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

// unsubscribe
this.handler();

【参考方案2】：

Julia Passynkova 答案几乎是正确的。

只要去掉“document”两边的引号，像这样：

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

// unsubscribe
this.handler();

注释：

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

【讨论】：

谢谢，这是一个很好的解决方案，但它有两个问题。 1）我们使用全局变量（文档），我认为在组件中使用全局变量是个坏主意。供测试用。 2) 我们总是要删除 Destroy 钩子上的处理程序。如果我们使用@RemoveHostingListener，该方法会代替我们这样做

我找到了另一个解决方案。使用从事件创建可观察对象的服务。我总是在文档上只有一个处理程序，但任何组件都可以使用它。

angular 2+ 中没有这样的功能@RemoveHostingListener .... 看这个话题：github.com/angular/angular/issues/16366

【参考方案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 ;

【讨论】：

这真的会导致事件处理程序被销毁吗？似乎事件侦听器（在 Angular 之外）会持续存在，这会导致内存泄漏。