特性模块link

Feature Moduleslink

特性模块是用来对代码进行组织的模块。

Feature modules are NgModules for the purpose of organizing code.

前提条件link

Prerequisiteslink

对下列知识有基本的了解：

A basic understanding of the following:

• 引导启动。

  Bootstrapping.

• JavaScript 模块与 NgModules。

  JavaScript Modules vs. NgModules.

• 常用模块。

  Frequently Used Modules.

要想查看本页提到的这个带有特性模块的范例应用，参见在线例子 / 下载范例。

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. 根模块link

Feature modules vs. root moduleslink

与核心的 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.

如何制作特性模块link

How to make a feature modulelink

如果你已经有了 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:

      
        content_copy
      
      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:

      
        content_copy
      
      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，它们在大多数模板中都要用到，而 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:

      
        content_copy
      
      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:

      
        content_copy
      
      // 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.

导入特性模块link

Importing a feature modulelink

要想把这个特性模块包含进应用中，你还得让根模块 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:

      
        content_copy
      
      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.

渲染特性模块的组件模板link

Rendering a feature module’s component templatelink

当 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:

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

要想在 AppComponent 中查看这些 HTML，你首先要在 CustomerDashboardModule 中导出 CustomerDashboardComponent。 在 customer-dashboard.module.ts 中，declarations 数组的紧下方，加入一个包含 CustomerDashboardModule 的 exports 数组：

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:

      
        content_copy
      
      exports: [
  CustomerDashboardComponent
]
    

然后，在 AppComponent 的 app.component.html 中，加入标签 <app-customer-dashboard>：

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

      
        content_copy
      
      <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 的更多知识link

More on NgModuleslink

你可能还对下列内容感兴趣：

You may also be interested in the following:

• 使用 Angular 路由器惰性加载模块。

  Lazy Loading Modules with the Angular Router.

• 服务提供商。

  Providers.

• 特性模块的分类。

  Types of Feature Modules.