@ContentChildren आबादी किया जा रहा है

Question

मैं तीन घटक होते हैं: अनुप्रयोग, जनक, एवं बाल:

अनुप्रयोग घटक

@Component({ 
    selector: 'app', 
    directives: [Parent,Child], 
    template: '<parent><child>hi</child><child>there</child></parent>' 
}) 
export class AppComponent { 
    constructor() { 
    } 
} 

जनक घटक

@Component({ 
    selector: 'parent', 
    template: '<div><h1>Parent</h1><ng-content></ng-content></div>' 
}) 
export class Parent { 
    @ContentChildren(Child) children: QueryList<Child>; 
    ngAfterContentInit() { 
     console.log(this.children); 
    } 
} 

बाल घटक

@Component({ 
    selector: 'child', 
    template: '<div><h1>Child</h1></div>' 
}) 
export class Child { 
} 

आप जनक घटक में देख सकते हैं, मैं @ContentChildren उपयोग करने के लिए बाल घटकों की सूची प्राप्त करने की कोशिश की है, एक चयनकर्ता के रूप में Child प्रकार का उपयोग। हालांकि, यह काम नहीं प्रतीत होता है - सामग्री बच्चों की सूची हमेशा अनिर्धारित होती है।

ngAfterContentInit() विधि में, मैं उम्मीद है | सामग्री बच्चों आबादी वाले किया जाना है।

क्या मुझे कुछ याद आ रही है?

[अपडेट]

तो यह पता चला है कि समस्या मौजूद है जब सभी तीन घटकों एक ही फाइल में हैं (कंसोल डिबग विंडो देखते हैं, जहां मैं उत्पादन सामग्री बच्चों):

Plnkr Demo of Issue

वे अलग फ़ाइलों में हैं, तो समस्या दूर हो जाने:

Plnkr Demo Working

आम तौर पर, मैं केवल सीखने प्रयोजनों के लिए एक ही फाइल में सभी घटकों को रखते हैं। लेकिन यह मुझे उत्सुक है। क्या कोई जानता है कि व्यवहार अलग क्यों है?

Answer 1

आप forwardRef उपयोग करने के लिए जो अभी तक परिभाषित नहीं कर रहे हैं वर्गों को संदर्भित करने की जरूरत है। this plunk देखें। ES6 classes are not hoisted याद रखें।

@Component({ 
    selector: 'parent', 
    template: '<div><h1>Parent</h1><ng-content></ng-content></div>' 
}) 
export class Parent { 
    @ContentChildren(forwardRef(() => Child)) children; // <!- HERE 

    ngAfterContentInit() { 
     console.log(this.children); 
     console.log(this.children.length); 
    } 
} 

युपीडी मार्क Rajcok angular2 में आगे संदर्भ (देखें टिप्पणी bellow) के बारे में एक बहुत अच्छा लेख ने बताया। पढ़ना चाहिए: thoughtram.io Forward references in Angular 2।