當組件被銷燬時，Angular銷燬事件處理程序和屬性如何綁定

Question

我想了解Angular組件的銷燬過程比我在文檔中找到的更詳細一點。我希望這裏有人能夠回答以下問題：

組件模板中元素的屬性在這些元素的事件偵聽器被刪除之前被刪除？

在組件的銷燬過程中，何時以及如何發生事件監聽器的註銷？

有沒有關於在Angular中內部刪除事件監聽器的過程的更多信息？

Answer 1

在JavaScript中，您無法刪除一個DOM節點。如果你有以下DOM樹：

div.children 
    span 

「摧毀」你只需從div.children刪除它的跨度。如果沒有更多指向span元素的鏈接，它將被垃圾收集。對於對象也是如此。

想象一下下面的結構角度：

ComponentA.nodes 
    ComponentBElement -> ComponentBClass 

角現在需要 「消滅」 ComponentB。要做到這一點，它簡單地從父母ComponentA.nodes分離ComponentBElement。這就是角呢，例如，當你執行viewContainerRef.clear()：

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

現在，假設角增加了一些事件監聽器ComponentBElement或其子女。

是否有任何需要明確致電removeEventListners？ Usually no，因爲一旦DOM元素被移除，事件監聽器也被垃圾收集。但是，可能會在某些異步任務或持續生存的對象中捕獲對事件偵聽器的引用。這可以防止垃圾收集器監聽器和DOM。所以Angular確保事件監聽器被移除（在v5中它的方法是DomEventsPlugin.removeEventListener）。

當角創建組件視圖它調用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附然後退訂回調（一次性的）被存儲到view.disposables。當角銷燬鑑於這些一次性執行和事件監聽器被刪除：

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

要了解更多有關意見和編譯閱讀：

• Here is what you need to know about dynamic components in Angular
• Here is why you will not find components inside Angular