Question

我很难让模块在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在完成后无法找到它。我究竟做错了什么？我错过了什么吗？

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

我们导出ContactComponent，以便导入其他模块   ContactModule可以将其包含在组件模板中。

默认情况下，所有其他声明的联系类都是私有的

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

导出其他模块中的组件应该是可声明的类能够在他们的模板中引用。这些是你的公共课程。如果您没有导出课程，它将保持私密状态，仅对其他人可见在此模块中声明的组件。

Answer 2

这已经得到了回答，但是对于其他有此问题的人来说，这对我来说是不同的解决方案。

检查在其中声明了父组件的模块，因为在我的情况下，是在Angular项目的共享模块中声明了父组件。原来，我的子组件需要与父组件一起在共享模块中声明才能完成此工作。我从Angular CLI放入的模块声明中取出了组件，然后将其放入共享模块的声明中，就像父组件一样，并且可以使用。

关键是：我使用Angular CLI生成了组件，但是CLI将该组件添加到了错误的模块声明中，但是Angular CLI这样做并不是完全错误，因为它实际上是Angular CLI的逻辑文件目录。组件和该组件的逻辑模块。

在我的情况下，父组件被用作路由组件。事实证明，我的父组件需要它自己的NgModule，但是我不确定。

希望这会有所帮助。

Angular 2找不到我的功能模块

2 个答案: