Angular9 特性模塊

特性模塊是用來對代碼進行組織的模塊。

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

特性模塊 vs. 根模塊

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

如何制作特性模塊

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

ng generate module CustomerDashboard

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

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';


@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class CustomerDashboardModule { }

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

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

ng generate component customer-dashboard/CustomerDashboard

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

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 導入列表里，并且被添加到了 declarations 數(shù)組中，它會讓 Angular 把新組件和這個特性模塊聯(lián)系起來。

導入特性模塊

要想把這個特性模塊包含進應用中，你還得讓根模塊 "app.module.ts" 知道它。注意，在 "customer-dashboard.module.ts" 文件底部 CustomerDashboardModule 的導出部分。這樣就把它暴露出來，以便其它模塊可以拿到它。要想把它導入到 AppModule 中，就把它加入 "app.module.ts" 的導入表中，并將其加入 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 知道這個特性模塊了。如果你往該特性模塊中加入過任何服務提供者，AppModule 也同樣會知道它，其它模塊中也一樣。不過，NgModule 并不會暴露出它們的組件。

渲染特性模塊的組件模板

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

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

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

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

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

exports: [
  CustomerDashboardComponent
]

然后，在 AppComponent 的 "app.component.html" 中，加入標簽 <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)在，除了默認渲染出的標題外，還渲染出了 CustomerDashboardComponent 的模板：