角 – @ContentChildren未被填充

我有三个组件：应用程序,父母和孩子：

应用程序组件

@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 {
}

在Parent组件中可以看到,我尝试使用@ContentChildren获取子组件的列表,使用Child类型作为选择器.然而,这似乎不起作用 – 内容子列表始终未定义.

在ngAfterContentInit()方法中,我希望填充内容的孩子.

我错过了什么吗？

[更新]

因此,事实证明,当所有三个组件都在同一个文件中时,存在问题(请参阅控制台调试窗口,我输出内容的孩子)：

Plnkr Demo of Issue

如果它们在单独的文件中,则问题消失：

Plnkr Demo Working

通常,我只将所有组件放在同一个文件中用于学习.但它让我很好奇有人知道为什么行为不同吗？

您需要使用 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指出了一篇关于angle2中转发参考的优秀文章(见下文的注释).必读：thoughtram.io Forward references in Angular 2.

角 – @ContentChildren未被填充

猜你在找的Angularjs相关文章