टेम्पलेट

Question

में एनजीआईएफ होने पर एंगुलर 2 घटक पूरी तरह से लोड किया गया है या नहीं, यह पहचानने के लिए कि क्या एक कोणीय 2 घटक (यहां AppComponent) पूरी तरह से लोड किया गया है (ViewChilds सहित), जब वहां टेम्पलेट में सशर्त रूप से एनजीआईएफ है बच्चे को लोड करता है

संदर्भ: Angular 2 @ViewChild annotation returns undefined यह उदाहरण उपरोक्त संदर्भ से लिया गया है। धन्यवाद 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 से पहले बच्चे घटकों के सक्रिय होने का ngIf हालत

मैं जब SlideshowComponent & ControlsComponent लोड किए गए हैं की पहचान करने और उसके आधार पर कोई कार्रवाई करने की जरूरत है की वजह से लोड किए गए हैं।

मेरे पास एक हैकी समाधान है जो कई व्यू चिल्ड्रन (जो विभिन्न प्रकार के होते हैं) - बच्चे को लोड होने पर सूचित करने के लिए एक ईवेंट एमिटर का उपयोग करते समय उपयुक्त नहीं है।

मैं इस प्रश्न को पोस्ट कर रहा हूं क्योंकि शोध के घंटों के बाद कोई उचित समाधान नहीं था।

Answer 1

PLUNKER

प्रयास करें ViewChild के बजाय ViewChildren है, जो एक changes प्रत्यक्ष प्रदान करता है, हम एक हुक के रूप में उपयोग कर सकते हैं।

सभी ViewChildren ट्रैक करने के लिए, आप एक में अपने changes observables मर्ज कर सकते हैं और यह करने के लिए सदस्यता है, तो आप कार्रवाई का एक बिंदु मिलता है, इस

@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

की तरह आप * ngIf में सामान लपेट कर सकते हैं ताकि एचटीएमएल कुछ भी नहीं दिखाएगा ngOnInit सभी समाप्त हो गया।

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

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