用于页眉和页脚的Angular 2功能模块

Question

现在，我有一个通用设置，其中将几个标准组件加载到一个公共页面页眉中，将几个组件加载到一个公共页面页脚中，并且可变的页面内容通过<router-outlet>显示<router-outlet>有点像所以。

app.component.ts

<div> Several header components loaded and displayed here. </div>
<router-outlet>
<div> Several footer components loaded and displayed here. </div>

所有这些都可以正常工作-除了我真的想进一步划分站点。 页眉和页脚中总共加载了大约20个组件。 我真的不想让我的app.module.ts ， app.component.ts或主app-routing.module.ts包含所有这些常见组件以及来自其许多链接的路由。 我非常希望将它们移入自己的功能模块。

我已经迁移所有组件的共同页头一个文件夹，名为common-header和所有常见的页脚到一个名为文件夹中部件的common-footer 。 （至少应用程序目录不是那么混乱。）

我什至分别创建了名为common-header.module和common-footer.module模块。 我创建了common-header.component和common-footer.component来包装html以调用相应的页眉和页脚组件。

如何在每个页面上调用和显示这些通用的页眉和页脚功能模块的内容？

Answer 1

组件位于哪个模块中都没有关系。只需确保要在其中使用组件（以及指令和管道）的功能模块的导出中包含组件，而在功能模块的导入中具有功能模块。

@NgModule({
  exports: [DirectiveA, PipeB, ComponentC],
  declarations: [DirectiveA, PipeB, ComponentC]
})
class MySharedModule{}

@NgModule({
  imports: [BrowserModule, MySharedModule],
  declarations: [AppComponent],
  declarations: [Bootstrap],
})
class AppModule{}

并将共享模块添加到要重用此模块的指令或管道的任何模块中的imports方式。