Question

现在，我有一个通用的设置，我将几个标准组件加载到一个公共页面标题中，将几个组件加载到一个公共页面页脚中，并通过<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的文件夹。（至少app目录不是那么混乱。）

我甚至分别创建了名为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，无论您想要重用该模块的指令或管道的任何模块。

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

1 个答案: