Angular 2找不到我的功能模块中声明的组件

发布时间：2020-12-17 17:22:19 所属栏目：安全来源：网络整理

导读：我很难让模块在Angular 2中运行. 我创建了 a plunk来演示这个问题. 在插件中,你会看到我有app.module.该模块导入app-common.module,其中包含一个显示页眉的组件.顶级组件的模板app.component包含此组件的选择器. 这是app.common.module： @NgModule({imports

我很难让模块在Angular 2中运行.
我创建了 a plunk来演示这个问题.
在插件中,你会看到我有app.module.该模块导入app-common.module,其中包含一个显示页眉的组件.顶级组件的模板app.component包含此组件的选择器.
这是app.common.module：

@NgModule({
imports:[CommonModule,FormsModule],declarations: [PageHeaderComponent]
})
export class AppCommonModule { }

这是app.module：

@NgModule({
imports:      [AppCommonModule,BrowserModule],declarations: [AppComponent ],bootstrap:    [ AppComponent ]
})
export class AppModule { }

运行应用程序时,它会抛出一个错误,“ref-pageheader”不是已知元素.如果我在app.module中声明组件,它可以正常工作.
那么,为什么我不能在导入到主app.module的模块中声明这个组件？看来Angular在完成后无法找到它.我究竟做错了什么？我错过了什么吗？

解决方法

我想你应该像以下一样导出它：

@NgModule({
    imports:[CommonModule,declarations: [PageHeaderComponent],exports: [PageHeaderComponent]
})
export class AppCommonModule { }

这样,其他组件可以使用该组件.

否则,PageHeaderComponent只能在AppCommonModule中使用

也可以看看

> https://angular.io/docs/ts/latest/guide/ngmodule.html#add-the-contactmodule

We export the ContactComponent so other modules that import the
ContactModule can include it in their component templates.

All other declared contact classes are private by default

> https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-what-to-export

Export declarable classes that components in other modules should be able to reference in their templates. These are your public classes. If you don’t export a class,it stays private,visible only to other component declared in this module.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!