首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

@ContentChildren没有被填充

作者：和谐啄木鸟 | 2023-09-08 16:51
如何解决《@ContentChildren没有被填充》经验，为你挑选了1个好方法。

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

应用组件

@Component({
    selector: 'app',
    directives: [Parent,Child],
    template: 'hithere'
})
export class AppComponent {
    constructor() {
    }
}

父组件

@Component({
    selector: 'parent',
    template: '
Parent
'
})
export class Parent {
    @ContentChildren(Child) children: QueryList;
    ngAfterContentInit() {
        console.log(this.children);
    }
}

子组件

@Component({
    selector: 'child',
    template: '
Child
'
})
export class Child {
}

正如您在Parent组件中看到的那样,我尝试使用类型作为选择器@ContentChildren来获取Child组件列表Child.但是,这似乎不起作用 - 内容子列表始终未定义.

在该ngAfterContentInit()方法中,我希望可以填充内容子项.

我错过了什么吗？

[更新]

事实证明,当所有三个组件都在同一个文件中时,问题就存在了(参见我输出内容子项的控制台调试窗口):

Plnkr问题演示

如果它们位于单独的文件中,则问题就会消失:

Plnkr演示工作

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



1> alexpods..：

您需要使用forwardRef 来引用尚未定义的类.看到这个插件.请记住,ES6课程并未悬挂.

@Component({
    selector: 'parent',
    template: '
Parent
'
})
export class Parent {
    @ContentChildren(forwardRef(() => Child)) children; // 


UPD Mark Rajcok在angular2中指出了一篇关于前向参考的优秀文章(见下文评论).必读:aftertram.io Angular 2中的前向引用.
推荐阅读
devbox
和谐啄木鸟
这个屌丝很懒，什么也没留下！
关注作者
Tags | 热门标签
RankList | 热门文章
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有