子要素が角をつけてレンダリングを終了したことをどのように知ることができますか？

Question

私は<router-outlet>を持つレイアウトコンポーネントを持っていて、子コンポーネントがルータによって動的に挿入されています。

子要素が挿入され、ビューの作成が完了したら、どのように知っていますか？

また、このソリューションを汎用的にしたいので、子コンポーネントのイベントを手動で起動することはできません。

Answer 1

@ViewChild結合を使用して<router-outlet>コンポーネントに結合することができます。

/** 
* Gain access to the inner route child. 
*/ 
@ViewChild(RouterOutlet) 
public outlet: RouterOutlet; 

あなたは、このような変化を聞くことができます：<router-outlet>これを追加使用するすべてのコンポーネントの場合

public ngAfterViewInit(): void { 
    this.outlet.activateEvents.subscribe((component) => { 
     // gets passed the new child component instance 
    }); 
    this.outlet.deactivateEvents.subscribe(() => { 
     // the child component has been destroyed 
    }); 
    if (this.outlet.isActivated) { 
     // will be false if there is no child route active 
    } 
} 

Answer 2

ルータがcomponentRefとアタッチを作成router-outletにactivateWithメソッドを呼び出しますそれはrouter-outletコンテナにあります。コンポーネントのビューを作成し、DOMに取り付けられている。この時点で

this.activateEvents.emit(this.activated.instance); 

：それはactivateイベントを発します。ただし、添付されたコンポーネントのconstructorのみが実行されます。ライフサイクルフックはまだありません。次回の変更検出では、添付されたコンポーネントのライフサイクルフックが呼び出されます。

yurzuiがあったとしてあなたは(activate)出力を通じてこのイベントをサブスクライブすることができます

<router-outlet (activate)="onActivated($event)"></router-outlet> 

または推奨されていないイベント・エミッター、使用して：だから

this.outlet.activateEvents.subscribe((component) => { 
     this.activated = true; 
}); 

をたとえば、あなたがしたい場合など子コンポーネントにngOnInitが呼び出されたときは、次のようにすることができます。

const activated = false; 

onActivated() { 
    this.activated = true; 
}); 

ngAfterViewInit() { 
    if (this.activated) { 
    // lifecycle hooks for the child component have been called 
    } 
}