Angular9 NgModule API

宏觀來(lái)講，NgModule 是組織 Angular 應(yīng)用的一種方式，它們通過(guò) @NgModule 裝飾器中的元數(shù)據(jù)來(lái)實(shí)現(xiàn)這一點(diǎn)。 這些元數(shù)據(jù)可以分成三類：

靜態(tài)的：編譯器配置，用于告訴編譯器指令的選擇器并通過(guò)選擇器匹配的方式?jīng)Q定要把該指令應(yīng)用到模板中的什么位置。它是通過(guò) declarations 數(shù)組來(lái)配置的。

運(yùn)行時(shí)：通過(guò) providers 數(shù)組提供給注入器的配置。

組合/分組：通過(guò) imports 和 exports 數(shù)組來(lái)把多個(gè) NgModule 放在一起，并讓它們可用。

@NgModule({
  // Static, that is compiler configuration
  declarations: [], // Configure the selectors
  entryComponents: [], // Generate the host factory


  // Runtime, or injector configuration
  providers: [], // Runtime injector configuration


  // Composability / Grouping
  imports: [], // composing NgModules together
  exports: [] // making NgModules available to other parts of the app
})

@NgModule 元數(shù)據(jù)

接下來(lái)對(duì) @NgModule 元數(shù)據(jù)中屬性的進(jìn)行匯總：

1. 屬性：declarations 。

屬于該模塊的可聲明對(duì)象（組件、指令和管道）的列表。

• 當(dāng)編譯模板時(shí)，你需要確定一組選擇器，它們將用于觸發(fā)相應(yīng)的指令。

• 該模板在 NgModule 環(huán)境中編譯 —— 模板的組件是在該 NgModule 內(nèi)部聲明的，它會(huì)使用如下規(guī)則來(lái)確定這組選擇器：

• 列在 declarations 中的所有指令選擇器。

• 從所導(dǎo)入的 NgModule 中導(dǎo)出的那些指令的選擇器。

• 組件、指令和管道只能屬于一個(gè)模塊。 如果嘗試把同一個(gè)類聲明在多個(gè)模塊中，編譯器就會(huì)報(bào)告一個(gè)錯(cuò)誤。 小心，不要重復(fù)聲明從其它模塊中直接或間接導(dǎo)入的類。

1. 屬性：providers 。

依賴注入提供者的列表。

• Angular 會(huì)使用該模塊的注入器注冊(cè)這些提供者。 如果該模塊是啟動(dòng)模塊，那就會(huì)使用根注入器。

• 當(dāng)需要注入到任何組件、指令、管道或服務(wù)時(shí)，這些服務(wù)對(duì)于本注入器的子注入器都是可用的。

• 惰性加載模塊有自己的注入器，它通常是應(yīng)用的根注入器的子注入器。

• 惰性加載的服務(wù)是局限于這個(gè)惰性加載模塊的注入器中的。 如果惰性加載模塊也提供了 UserService，那么在這個(gè)模塊的上下文中創(chuàng)建的任何組件（比如在路由器導(dǎo)航時(shí)），都會(huì)獲得這個(gè)服務(wù)的本模塊內(nèi)實(shí)例，而不是來(lái)自應(yīng)用的根注入器的實(shí)例。

• 其它外部模塊中的組件也會(huì)使用它們自己的注入器提供的服務(wù)實(shí)例。

1. 屬性：imports 。

• 要折疊（Folded）進(jìn)本模塊中的其它模塊。折疊的意思是從被導(dǎo)入的模塊中導(dǎo)出的那些軟件資產(chǎn)同樣會(huì)被聲明在這里。

• 特別是，這里列出的模塊，其導(dǎo)出的組件、指令或管道，當(dāng)在組件模板中被引用時(shí)，和本模塊自己聲明的那些是等價(jià)的。

• 組件模板可以引用其它組件、指令或管道，不管它們是在本模塊中聲明的，還是從導(dǎo)入的模塊中導(dǎo)出的。 比如，只有當(dāng)該模塊導(dǎo)入了 Angular 的 CommonModule（也可能從BrowserModule中間接導(dǎo)入）時(shí)，組件才能使用NgIf和NgFor 指令。

• 你可以從 CommonModule 中導(dǎo)入很多標(biāo)準(zhǔn)指令，不過(guò)也有些常用的指令屬于其它模塊。 比如，你只有導(dǎo)入了 Angular 的 FormsModule 時(shí)才能使用 [(ngModel)]。

1. 屬性：exports 。

可供導(dǎo)入了自己的模塊使用的可聲明對(duì)象（組件、指令、管道類）的列表。

• 導(dǎo)出的可聲明對(duì)象就是本模塊的公共 API。 只有當(dāng)其它模塊導(dǎo)入了本模塊，并且本模塊導(dǎo)出了 UserComponent 時(shí)，其它模塊中的組件才能使用本模塊中的 UserComponent。

• 默認(rèn)情況下這些可聲明對(duì)象都是私有的。 如果本模塊沒(méi)有導(dǎo)出 UserComponent，那么就只有本模塊中的組件才能使用 UserComponent。

• 導(dǎo)入某個(gè)模塊并不會(huì)自動(dòng)重新導(dǎo)出被導(dǎo)入模塊的那些導(dǎo)入。 模塊 B 不會(huì)因?yàn)樗鼘?dǎo)入了模塊 A，而模塊 A 導(dǎo)入了 CommonModule 而能夠使用 ngIf。 模塊 B 必須自己導(dǎo)入 CommonModule。

• 一個(gè)模塊可以把另一個(gè)模塊加入自己的 exports 列表中，這時(shí)，另一個(gè)模塊的所有公共組件、指令和管道都會(huì)被導(dǎo)出。

• 重新導(dǎo)出可以讓模塊被顯式傳遞。 如果模塊 A 重新導(dǎo)出了 CommonModule，而模塊 B 導(dǎo)入了模塊 A，那么模塊 B 就可以使用 ngIf 了 —— 即使它自己沒(méi)有導(dǎo)入 CommonModule。

1. 屬性：bootstrap 。

要自動(dòng)啟動(dòng)的組件列表。

• 通常，在這個(gè)列表中只有一個(gè)組件，也就是應(yīng)用的根組件。

• Angular 也可以用多個(gè)引導(dǎo)組件進(jìn)行啟動(dòng)，它們每一個(gè)在宿主頁(yè)面中都有自己的位置。

• 啟動(dòng)組件會(huì)自動(dòng)添加到 entryComponents 中。

1. 屬性：entryComponents 。

那些可以動(dòng)態(tài)加載進(jìn)視圖的組件列表。

• 默認(rèn)情況下，Angular 應(yīng)用至少有一個(gè)入口組件，也就是根組件 AppComponent。 它用作進(jìn)入該應(yīng)用的入口點(diǎn)，也就是說(shuō)你通過(guò)引導(dǎo)它來(lái)啟動(dòng)本應(yīng)用。

• 路由組件也是入口組件，因?yàn)槟阈枰獎(jiǎng)討B(tài)加載它們。 路由器創(chuàng)建它們，并把它們?nèi)拥?DOM 中的 <router-outlet> 附近。

• 雖然引導(dǎo)組件和路由組件都是入口組件，不過(guò)你不用自己把它們加到模塊的 entryComponents 列表中，因?yàn)樗鼈儠?huì)被隱式添加進(jìn)去。

• Angular 會(huì)自動(dòng)把模塊的 bootstrap 中的組件和路由定義中的組件添加到 entryComponents 列表。

• 而那些使用不易察覺(jué)的ViewComponentRef.createComponent()的方式進(jìn)行命令式引導(dǎo)的組件仍然需要添加。

• 動(dòng)態(tài)組件加載在除路由器之外的大多數(shù)應(yīng)用中都不太常見(jiàn)。如果你需要?jiǎng)討B(tài)加載組件，就必須自己把那些組件添加到 entryComponents 列表中。