Angular会自动删除模板事件侦听器吗？

Question

在我的模板中，我附加了click个事件监听器：

<a class="link-component" href="{{displayURL}}" (click)="handleClick($event)">

我知道我可以使用HostListener或Renderer2，如下所示：

 this.clickListener = this.renderer.listen(this.htmlElement, 'click'........
 this.clickListener();

但是，就template绑定事件处理程序而言，它们会在组件被销毁时自动删除吗？

Answer 1

当angular创建视图节点listens to element outputs时，例如click，focus，change等，并添加一次性回调  到当前视图的disposables数组

现在是时候摧毁视角runs all disposable callbacks

了

export function destroyView(view: ViewData) {
  if (view.state & ViewState.Destroyed) {
    return;
  }
  execEmbeddedViewsAction(view, ViewAction.Destroy);
  execComponentViewsAction(view, ViewAction.Destroy);
  callLifecycleHooksChildrenFirst(view, NodeFlags.OnDestroy);
  if (view.disposables) {
    for (let i = 0; i < view.disposables.length; i++) {
      view.disposables[i]();  <================================
    }
  }
  ...

因此，这种方式将删除当前视图的所有侦听器。

另见：

• Do you need to unsubscribe from @Output EventEmitter

Answer 2

是的，您在模板上绑定的所有内容都将随组件一起销毁。与@HostListener的绑定也将被删除。只有使用addEventListener或派生语法手动收听的事件才会自动删除。