Angular9 特性模塊

特性模塊是用來對代碼進(jìn)行組織的模塊。

隨著應(yīng)用的增長，你可能需要組織與特定應(yīng)用有關(guān)的代碼。 這將幫你把特性劃出清晰的邊界。使用特性模塊，你可以把與特定的功能或特性有關(guān)的代碼從其它代碼中分離出來。 為應(yīng)用勾勒出清晰的邊界，有助于開發(fā)人員之間、小組之間的協(xié)作，有助于分離各個(gè)指令，并幫助管理根模塊的大小。

特性模塊 vs. 根模塊

與核心的 Angular API 的概念相反，特性模塊是最佳的組織方式。特性模塊提供了聚焦于特定應(yīng)用需求的一組功能，比如用戶工作流、路由或表單。 雖然你也可以用根模塊做完所有事情，不過特性模塊可以幫助你把應(yīng)用劃分成一些聚焦的功能區(qū)。特性模塊通過它提供的服務(wù)以及共享出的組件、指令和管道來與根模塊和其它模塊合作。

如何制作特性模塊

如果你已經(jīng)有了 Angular CLI 生成的應(yīng)用，可以在項(xiàng)目的根目錄下輸入下面的命令來創(chuàng)建特性模塊。把這里的 CustomerDashboard 替換成你的模塊名。你可以從名字中省略掉“Module”后綴，因?yàn)?CLI 會(huì)自動(dòng)追加上它：

ng generate module CustomerDashboard

這會(huì)讓 CLI 創(chuàng)建一個(gè)名叫 "customer-dashboard" 的文件夾，其中有一個(gè)名叫 "customer-dashboard.module.ts"，內(nèi)容如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class CustomerDashboardModule { }

無論根模塊還是特性模塊，其 NgModule 結(jié)構(gòu)都是一樣的。在 CLI 生成的特性模塊中，在文件頂部有兩個(gè) JavaScript 的導(dǎo)入語句：第一個(gè)導(dǎo)入了 NgModule，它像根模塊中一樣讓你能使用 @NgModule 裝飾器；第二個(gè)導(dǎo)入了 CommonModule，它提供了很多像 ngIf 和 ngFor 這樣的常用指令。 特性模塊導(dǎo)入 CommonModule，而不是 BrowserModule，后者只應(yīng)該在根模塊中導(dǎo)入一次。 CommonModule 只包含常用指令的信息，比如 ngIf 和 ngFor，它們在大多數(shù)模板中都要用到，而 BrowserModule 為瀏覽器所做的應(yīng)用配置只會(huì)使用一次。

declarations 數(shù)組讓你能添加專屬于這個(gè)模塊的可聲明對象（組件、指令和管道）。 要添加組件，就在命令行中輸入如下命令，這里的 "customer-dashboard" 是一個(gè)目錄，CLI 會(huì)把特性模塊生成在這里，而 CustomerDashboard 就是該組件的名字：

ng generate component customer-dashboard/CustomerDashboard

這會(huì)在 customer-dashboard 中為新組件生成一個(gè)目錄，并使用 CustomerDashboardComponent 的信息修改這個(gè)特性模塊：

Path："src/app/customer-dashboard/customer-dashboard.module.ts"。

// import the new component
import { CustomerDashboardComponent } from './customer-dashboard/customer-dashboard.component';
@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    CustomerDashboardComponent
  ],
})

CustomerDashboardComponent 出現(xiàn)在了頂部的 JavaScript 導(dǎo)入列表里，并且被添加到了 declarations 數(shù)組中，它會(huì)讓 Angular 把新組件和這個(gè)特性模塊聯(lián)系起來。

導(dǎo)入特性模塊

要想把這個(gè)特性模塊包含進(jìn)應(yīng)用中，你還得讓根模塊 "app.module.ts" 知道它。注意，在 "customer-dashboard.module.ts" 文件底部 CustomerDashboardModule 的導(dǎo)出部分。這樣就把它暴露出來，以便其它模塊可以拿到它。要想把它導(dǎo)入到 AppModule 中，就把它加入 "app.module.ts" 的導(dǎo)入表中，并將其加入 imports 數(shù)組：

Path："src/app/app.module.ts"。

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// import the feature module here so you can add it to the imports array below
import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    CustomerDashboardModule // add the feature module here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

現(xiàn)在 AppModule 知道這個(gè)特性模塊了。如果你往該特性模塊中加入過任何服務(wù)提供者，AppModule 也同樣會(huì)知道它，其它模塊中也一樣。不過，NgModule 并不會(huì)暴露出它們的組件。

渲染特性模塊的組件模板

當(dāng) CLI 為這個(gè)特性模塊生成 CustomerDashboardComponent 時(shí)，還包含一個(gè)模板 "customer-dashboard.component.html"，它帶有如下頁面腳本：

Path："src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html"。

<p>
  customer-dashboard works!
</p>

要想在 AppComponent 中查看這些 HTML，你首先要在 CustomerDashboardModule 中導(dǎo)出 CustomerDashboardComponent。 在 "customer-dashboard.module.ts" 中，declarations 數(shù)組的緊下方，加入一個(gè)包含 CustomerDashboardModule 的 exports 數(shù)組：

Path："src/app/customer-dashboard/customer-dashboard.module.ts"。

exports: [
  CustomerDashboardComponent
]

然后，在 AppComponent 的 "app.component.html" 中，加入標(biāo)簽 <app-customer-dashboard>：

Path："src/app/app.component.html"。

<h1>
  {{title}}
</h1>
<!-- add the selector from the CustomerDashboardComponent -->
<app-customer-dashboard></app-customer-dashboard>

現(xiàn)在，除了默認(rèn)渲染出的標(biāo)題外，還渲染出了 CustomerDashboardComponent 的模板：