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

Question

我很难让模块在 Angular 2 中工作。我创建了 a plunk这说明了问题。在 plunk 中，您会看到我有 app.module。该模块引入了 app-common.module，其中包含一个显示页眉的组件。顶级组件的模板 app.component 包含该组件的选择器。这是 app.common.module:

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

这是应用程序模块:

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

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

Answer 1

我猜你应该像这样导出它:

@NgModule({
    imports:[CommonModule, FormsModule],
    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.