当组件被销毁时，Angular 如何销毁事件处理程序和属性绑定

本文介绍了当组件被销毁时，Angular 如何销毁事件处理程序和属性绑定的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我试图比我在文档中找到的更详细地了解 Angular Components 的销毁过程.我希望这里有人能够回答以下问题:

I am trying to understand the destruction process of Angular Components a bit more detailed than what I could find in the documentation. I was hoping someone here would be able to answer the following questions:

在移除组件模板中元素的事件侦听器之前是否移除了这些元素的属性?

Are properties on elements in the Component template removed before the event listeners of such elements are removed?

在一个组件销毁过程中，事件监听器的注销是什么时候发生的，是如何发生的?

In the destruction process of a Component, when and how does the de-registration of an event listener happen?

是否有更多关于在 Angular 内部删除事件侦听器的过程的信息?

Is there any more information available concerning the process of removing event listeners internally in Angular?

推荐答案

在 JavaScript 中，您无法删除 DOM 节点本身.如果您有以下 DOM 树:

In JavaScript you cannot remove a DOM node per-se. If you have the following DOM tree:

div.children
   span

要销毁"一个跨度，您只需将其从 div.children 中删除.如果没有更多链接指向 span 元素，它将被垃圾收集.对象也是如此.

To "destroy" a span you simply need to remove it from the div.children. If there are no more links pointing to the span element it will be garbage collected. And the same holds true for objects.

想象一下 Angular 中的以下结构:

Imagine the following structure in Angular:

ComponentA.nodes
   ComponentBElement -> ComponentBClass

现在 Angular 需要摧毁"ComponentB.为此，它只需将 ComponentBElement 与父 ComponentA.nodes 分离.这就是 Angular 所做的，例如，当你执行 viewContainerRef.clear() 时:

Now Angular needs to "destroy" ComponentB. To do that it simply detaches ComponentBElement from the parent ComponentA.nodes. And this is what Angular does, for example, when you execute viewContainerRef.clear():

function execRenderNodeAction(...) {
  const renderer = view.renderer;
  switch (action) {
    ...
    case RenderNodeAction.RemoveChild:
      renderer.removeChild(parentNode, renderNode);
      break; 

现在，假设 Angular 向 ComponentBElement 或其子元素添加了一些事件侦听器.

Now, suppose Angular added some event listeners to ComponentBElement or its children.

是否需要显式调用removeEventListners?通常不会，因为一旦移除 DOM 元素，事件侦听器也会被垃圾收集.但是，有可能在某个异步任务或继续存在的对象中捕获对事件侦听器的引用.这可以防止侦听器和 DOM 被垃圾收集.所以 Angular 确保删除事件侦听器(在 v5 中它是 DomEventsPlugin.removeEventListener 方法).

Is there any need to explicitly call removeEventListners? Usually no, because once DOM elements are removed the event listeners are garbage collected as well. However, there's a possibility that a reference to the event listener is captured in some async task or an object that continues to live. This prevents the listener and the DOM from being garbage collected. So Angular ensures that event listeners are removed (in v5 it's DomEventsPlugin.removeEventListener method).

当 Angular 创建一个组件视图时，它调用 listenToElementOutputs:

When Angular creates a component view it calls listenToElementOutputs:

function listenToElementOutputs(view, compView, def, el) {
    for (var i = 0; i < def.outputs.length; i++) {
        ...
        var disposable = listenerView.renderer.listen(listenTarget || el, output.eventName, handleEventClosure));
        ((view.disposables))[def.outputIndex + i] = disposable; <------
    }
}

您可以看到使用 renderer 附加事件，然后取消订阅回调(disposable)存储到 view.disposables 中.当 Angular 销毁视图时，会执行这些一次性物品并移除事件侦听器.:

You can see that event is attached using renderer and then the unsubscription callback (disposable) is stored into view.disposables. When Angular destroys a view these disposables are executed and event listeners are removed.:

function [destroyView](view) {
    ...
    if (view.disposables) {
        for (var i = 0; i < view.disposables.length; i++) {
            view.disposables[i](); <----------------
        }
    }

要了解有关视图和编译的更多信息，请阅读:

To learn more about views and compilation read:

以下是您需要了解的有关 Angular 中动态组件的信息这就是原因你不会在 Angular 中找到组件

这篇关于当组件被销毁时，Angular 如何销毁事件处理程序和属性绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！