填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

特性模組

Feature modules

特性模組是用來對程式碼進行組織的模組。

Feature modules are NgModules for the purpose of organizing code.

要想檢視本頁提到的這個帶有特性模組的範例應用,參閱現場演練 / 下載範例

For the final sample app with a feature module that this page describes, see the現場演練 / 下載範例.


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

As your app grows, you can organize code relevant for a specific feature. This helps apply clear boundaries for features. With feature modules, you can keep code related to a specific functionality or feature separate from other code. Delineating areas of your app helps with collaboration between developers and teams, separating directives, and managing the size of the root module.

特性模組 vs. 根模組

Feature modules vs. root modules

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

A feature module is an organizational best practice, as opposed to a concept of the core Angular API. A feature module delivers a cohesive set of functionality focused on a specific application need such as a user workflow, routing, or forms. While you can do everything within the root module, feature modules help you partition the app into focused areas. A feature module collaborates with the root module and with other modules through the services it provides and the components, directives, and pipes that it shares.

如何製作特性模組

How to make a feature module

如果你已經有了 Angular CLI 產生的應用,可以在專案的根目錄下輸入下面的命令來建立特性模組。把這裡的 CustomerDashboard 替換成你的模組名。你可以從名字中省略掉“Module”字尾,因為 CLI 會自動追加上它:

Assuming you already have an app that you created with the Angular CLI, create a feature module using the CLI by entering the following command in the root project directory. Replace CustomerDashboard with the name of your module. You can omit the "Module" suffix from the name because the CLI appends it:

      
      ng generate module CustomerDashboard
    

這會讓 CLI 建立一個名叫 customer-dashboard 的資料夾,其中有一個名叫 customer-dashboard.module.ts,內容如下:

This causes the CLI to create a folder called customer-dashboard with a file inside called customer-dashboard.module.ts with the following contents:

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

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

無論根模組還是特性模組,其 NgModule 結構都是一樣的。在 CLI 產生的特性模組中,在檔案頂部有兩個 JavaScript 的匯入語句:第一個匯入了 NgModule,它像根模組中一樣讓你能使用 @NgModule 裝飾器;第二個匯入了 CommonModule,它提供了很多像 ngIfngFor 這樣的常用指令。 特性模組匯入 CommonModule,而不是 BrowserModule,後者只應該在根模組中匯入一次。 CommonModule 只包含常用指令的資訊,比如 ngIfngFor,它們在大多數範本中都要用到,而 BrowserModule 為瀏覽器所做的應用配置只會使用一次。

The structure of an NgModule is the same whether it is a root module or a feature module. In the CLI generated feature module, there are two JavaScript import statements at the top of the file: the first imports NgModule, which, like the root module, lets you use the @NgModule decorator; the second imports CommonModule, which contributes many common directives such as ngIf and ngFor. Feature modules import CommonModule instead of BrowserModule, which is only imported once in the root module. CommonModule only contains information for common directives such as ngIf and ngFor which are needed in most templates, whereas BrowserModule configures the Angular app for the browser which needs to be done only once.

declarations 陣列讓你能新增專屬於這個模組的可宣告物件(元件、指令和管道)。 要新增元件,就在命令列中輸入如下命令,這裡的 customer-dashboard 是一個目錄,CLI 會把特性模組產生在這裡,而 CustomerDashboard 就是該元件的名字:

The declarations array is available for you to add declarables, which are components, directives, and pipes that belong exclusively to this particular module. To add a component, enter the following command at the command line where customer-dashboard is the directory where the CLI generated the feature module and CustomerDashboard is the name of the component:

      
      ng generate component customer-dashboard/CustomerDashboard
    

這會在 customer-dashboard 中為新元件產生一個目錄,並使用 CustomerDashboardComponent 的資訊修改這個特性模組:

This generates a folder for the new component within the customer-dashboard folder and updates the feature module with the CustomerDashboardComponent info:

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 出現在了頂部的 JavaScript 匯入列表裡,並且被新增到了 declarations 陣列中,它會讓 Angular 把新元件和這個特性模組聯絡起來。

The CustomerDashboardComponent is now in the JavaScript import list at the top and added to the declarations array, which lets Angular know to associate this new component with this feature module.

匯入特性模組

Importing a feature module

要想把這個特性模組包含進應用中,你還得讓根模組 app.module.ts 知道它。注意,在 customer-dashboard.module.ts 檔案底部 CustomerDashboardModule 的匯出部分。這樣就把它暴露出來,以便其它模組可以拿到它。要想把它匯入到 AppModule 中,就把它加入 app.module.ts 的匯入表中,並將其加入 imports 陣列:

To incorporate the feature module into your app, you have to let the root module, app.module.ts, know about it. Notice the CustomerDashboardModule export at the bottom of customer-dashboard.module.ts. This exposes it so that other modules can get to it. To import it into the AppModule, add it to the imports in app.module.ts and to the imports array:

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 { }
    

現在 AppModule 知道這個特性模組了。如果你往該特性模組中加入過任何服務提供者,AppModule 也同樣會知道它,其它模組中也一樣。不過,NgModule 並不會暴露出它們的元件。

Now the AppModule knows about the feature module. If you were to add any service providers to the feature module, AppModule would know about those too, as would any other feature modules. However, NgModules don’t expose their components by default.

渲染特性模組的元件範本

Rendering a feature module’s component template

當 CLI 為這個特性模組產生 CustomerDashboardComponent 時,還包含一個範本 customer-dashboard.component.html,它帶有如下頁面指令碼:

When the CLI generated the CustomerDashboardComponent for the feature module, it included a template, customer-dashboard.component.html, with the following markup:

src/app/customer-dashboard/customer-dashboard/customer-dashboard.component.html
      
      <p>
  customer-dashboard works!
</p>
    

要想在 AppComponent 中檢視這些 HTML,你首先要在 CustomerDashboardModule 中匯出 CustomerDashboardComponent。 在 customer-dashboard.module.ts 中,declarations 陣列的緊下方,加入一個包含 CustomerDashboardModuleexports 陣列:

To see this HTML in the AppComponent, you first have to export the CustomerDashboardComponent in the CustomerDashboardModule. In customer-dashboard.module.ts, just beneath the declarations array, add an exports array containing CustomerDashboardComponent:

src/app/customer-dashboard/customer-dashboard.module.ts
      
      exports: [
  CustomerDashboardComponent
]
    

然後,在 AppComponentapp.component.html 中,加入標籤 <app-customer-dashboard>

Next, in the AppComponent, app.component.html, add the tag <app-customer-dashboard>:

src/app/app.component.html
      
      <h1>
  {{title}}
</h1>

<!-- add the selector from the CustomerDashboardComponent -->
<app-customer-dashboard></app-customer-dashboard>
    

現在,除了預設渲染出的標題外,還渲染出了 CustomerDashboardComponent 的範本:

Now, in addition to the title that renders by default, the CustomerDashboardComponent template renders too:

關於 NgModule 的更多知識

More on NgModules

你可能還對下列內容感興趣:

You may also be interested in the following: