页眉和页脚的 Angular 2 功能模块答案

【问题标题】：Angular 2 Feature Modules for Headers and Footers页眉和页脚的 Angular 2 功能模块
【发布时间】：2016-12-10 11:13:21
【问题描述】：

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

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 的文件夹中。（至少app目录没有那么杂乱。）

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

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

【问题讨论】：

我看不出将组件拆分为共享模块和“在每一页上调用和显示......”是如何相关的。问题是什么？你试过什么？什么是“每一页”？
该站点将有许多功能模块。我只是想将公共页眉的所有元素放入一个模块中，将公共页脚的元素放入另一个模块中，然后在每个逻辑页面上调用并显示这两个模块中的组件内容。显然，Angular2 是一个只有一个真实页面的 SPA 框架。我指的是虚拟页面，而不是实际页面。
组件在哪个模块中无关紧要。只要确保您拥有要使用的功能模块的exports 中的组件和您要使用的模块的imports 中的功能模块组件（以及指令和管道）
哇！多么容易解决。谢谢甘特！如果您可以发表评论作为答案，我会将其标记为已关闭。

标签： angular angular2-routing angular2-template

【解决方案1】：

组件在哪个模块中无关紧要。只要确保您在功能模块的导出中拥有组件，在要使用组件（以及指令和管道）的模块的导入中拥有功能模块

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

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

并以这种方式将共享模块添加到imports，在您想要重用该模块的指令或管道的任何模块中。

【讨论】：

太棒了！非常感谢甘特的帮助！效果很好！