Angularは、コンポーネントが破壊されたときにイベントハンドラとプロパティバインディングを破棄する方法

Question

角度コンポーネントの破壊プロセスについては、ドキュメントに記載されているよりも少し詳細を理解しようとしています。

このような要素のイベントリスナーが削除される前に、コンポーネントテンプレートの要素のプロパティが削除されていますか？

コンポーネントの破棄プロセスでは、イベントリスナーの登録解除はいつ、どのように行われますか？

イベントリスナーを内部的にアンギュラで削除するプロセスに関する情報はありますか？

Answer 1

JavaScriptでは、DOMノードを個別に削除することはできません。次のDOMツリーを持っている場合：

div.children 
    span 

は、あなたは、単にdiv.childrenからそれを削除する必要があるスパンを「破壊」するには。 span要素を指すリンクがもうない場合は、ガベージコレクションされます。そして、オブジェクトについても同様です。

角度で次のような構造を想像してみて：

ComponentA.nodes 
    ComponentBElement -> ComponentBClass 

今角度はComponentBを "破壊" する必要があります。これを行うには、単にComponentBElementを親のComponentA.nodesから切り離します。 、今

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

を角度はComponentBElementまたはその子にいくつかのイベントリスナーを追加するとします。あなたはviewContainerRef.clear()を実行するときに、これは、角度は例えば、何をするかです。

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