用於頁眉和頁腳的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方式。