angular - @ContentChildren 未被填充

Question

我有三个组件:App、Parent 和 Child:

应用组件

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

UPD Mark Rajcok 指出了一篇关于 angular2 中前向引用的优秀文章(请参阅下面的评论)。必读:thoughtram.io Forward references in Angular 2 .