Jak zidentyfikować, czy komponent Angular2 jest w pełni załadowany (w tym ViewChilds), gdy istnieje ngIf w szablonie

Question

Czy można zidentyfikować, czy komponent Angular2 (tutaj AppComponent) jest całkowicie załadowany (w tym ViewChilds), gdy w szablonie występuje warunek ngIf ładuje dziecko.

Numer referencyjny: Angular 2 @ViewChild annotation returns undefined Ten przykład pochodzi z powyższego odwołania. Dzięki 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 
    } 

} 

ngOnInit & & ngAfterViewInit są wypalane przed elementów podrzędnych są ładowane ze względu na stan ngIf

muszę określić, kiedy SlideshowComponent & ControlsComponent są ładowane i wykonać działanie w oparciu o to.

Mam hacky rozwiązanie, które nie jest odpowiednie, gdy istnieje wiele ViewChilds (które są innego typu) - Korzystanie z emitera zdarzeń, aby poinformować, gdy dziecko jest ładowany.

Zamieszczam to pytanie, ponieważ po wielu godzinach badań nie było odpowiedniego rozwiązania.

Answer 1

PLUNKER

Spróbuj ViewChildren zamiast ViewChild, który zapewnia changes Obserwowalne, możemy użyć jako haka.

Aby śledzić wszystkie ViewChildren, można scalić swoje changes obserwable do jednego i do niej zapisać, a następnie dostać jeden punkt akcji, jak to

@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

Można zawinąć rzeczy w * ngIf tak że html nie wyświetli niczego, dopóki ngOnInit nie skończy wszystkich.

<div *ngIf="loaded"> 
    /* all codes go here */ 
<div> 

OnInit(){ 
    foo(); 
    bar(()=>{ 
     this.loaded = true; 
    }); 
}