@ContentChildren non vengono popolati

Question

Ho tre componenti: App, Genitori e bambini:

App componenti

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

Parent componente

@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); 
    } 
} 

Componente figlio

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

Come si può vedere nella componente genitore, ho cercato di usare @ContentChildren per ottenere la lista dei componenti del bambino, utilizzando il tipo Child come selettore. Tuttavia, questo non sembra funzionare - l'elenco dei contenuti dei bambini è sempre indefinito.

Nel metodo ngAfterContentInit(), mi sarei aspettato che i contenuti fossero popolati.

Mi manca qualcosa?

[Update]

Così si scopre che il problema esiste quando tutti e tre i componenti sono nello stesso file (vedi finestra della console di debug in cui l'uscita ho i contenuti figli):

Plnkr Demo of Issue

Se sono in file separati il ​​problema scompare:

Plnkr Demo Working

Normalmente, inserisco tutti i componenti nello stesso file solo a scopo di apprendimento. Ma mi ha incuriosito. Qualcuno sa perché il comportamento è diverso?

Answer 1

È necessario utilizzare forwardRef per referenziare classi che non sono ancora definite. Vedi this plunk. Ricorda 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); 
    } 
} 

UPD Mark Rajcok rilevare un eccellente articolo sui riferimenti a termine in angular2 (vedi il commento qui sotto). Da leggere: thoughtram.io Forward references in Angular 2.