Identifizieren, ob eine Angular2-Komponente vollständig geladen ist (einschließlich ViewChilds), wenn in Template

Question

ist Ist es möglich, eine Angular2-Komponente (hier AppComponents) vollständig geladen (einschließlich ViewChilds), wenn in Template unter welchen Bedingungen lädt das Kind.

Referenz: Angular 2 @ViewChild annotation returns undefined Dieses Beispiel ist der obigen Referenz entnommen. Dank kenecaswell

import {Component, ViewChild, OnInit, AfterViewInit} from 'angular2/core'; 
import {ControlsComponent} from './child-component-1'; 
import {SlideshowComponent} from './slideshow/slideshow.component'; 

@Component({ 
    selector: 'app', 
    template: ` 
     <div *ngIf="controlsOn"> 
      <controls ></controls> 
      <slideshow></slideshow> 
     </div> 
    `, 
    directives: [SlideshowComponent, ControlsComponent] 
}) 

export class AppComponent { 
    @ViewChild(ControlsComponent) controls:ControlsComponent; 
    @ViewChild(SlideshowComponent) slide:SlideshowComponent; 

    controlsOn:boolean = false; 

    ngOnInit() { 
     console.log('on init', this.controls); 
     // this returns undefined 
    } 

    ngAfterViewInit() { 
     console.log('on after view init', this.controls); 
     // this returns null 
    } 

} 

Die ngOnInit & & ngAfterViewInit vor den untergeordneten Komponenten ausgelöst werden, weil der Zustand ngIf geladen

ich identifizieren müssen, wenn SlideshowComponent & ControlsComponent geladen werden und eine Aktion ausführen, auf der Grundlage dieser.

Ich habe eine Hacky-Lösung, die nicht geeignet ist, wenn mehrere ViewChilds (die von unterschiedlichem Typ sind) - Verwenden eines Ereignisemitter zu informieren, wenn das Kind geladen wird.

Ich poste diese Frage, da es nach Stunden der Forschung keine richtige Lösung gab.

Answer 1

PLUNKER

Versuchen ViewChildren statt ViewChild, die ein changes beobachtbare bietet, können wir als Haken verwenden.

Um alle ViewChildren verfolgen Sie ihre changes Observable in ein und abonnieren Sie sie zusammenführen können, dann sind Sie Single Point of Aktion zu erhalten, wie diese

@ViewChildren(ChildCmp) children: QueryList<ChildCmp>; 
    @ViewChildren(AnotherChildCmp) anotherChildren: QueryList<ChildCmp>; 

    childrenDetector: Observable<any>; // merged observable to detect changes in both queries 

    ngAfterViewInit(){ 
    this.childrenDetector = Observable.merge(this.children.changes, this.anotherChildren.changes) 

    this.childrenDetector.subscribe(() => { 

     // here you can even check the count of view children, that you queried 
     // eg: if(this.children.length === 1 && this.anotherChildren.length === 1) { bothInitialized(); } 
     // or something like that 

     alert('you just initialized a children'); 
    }); 
    } 
} 

Answer 2

Sie Sachen in der * ngIf so dass HTML-wrap zeigt nichts an, bis ngOnInit alle beendet hat.