本文共 3003 字，大约阅读时间需要 10 分钟。

随着应用的增长，你可能需要组织与特定应用有关的代码。 这将帮你把特性划出清晰的边界。使用特性模块，你可以把与特定的功能或特性有关的代码从其它代码中分离出来。 为应用勾勒出清晰的边界，有助于开发人员之间、小组之间的协作，有助于分离各个指令，并帮助管理根模块的大小。

特性模块 vs. 根模块

与核心的 Angular API 的概念相反，特性模块是最佳的组织方式。特性模块提供了聚焦于特定应用需求的一组功能，比如用户工作流、路由或表单。 虽然你也可以用根模块做完所有事情，不过特性模块可以帮助你把应用划分成一些聚焦的功能区。特性模块通过它提供的服务以及共享出的组件、指令和管道来与根模块和其它模块合作。

如何制作特性模块

我们来看下完整的结构图

1）特性模块结构

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 为浏览器所做的应用配置只会使用一次。简而言之，就是都要用到的东西，需要在子模块中再次引入，而全局配置只需在根目录引入一次。

2）完整的特性模块例子

import {    NgModule } from '@angular/core';import {    CommonModule } from '@angular/common';// import the new componentimport {    CustomerDashboardComponent } from './customer-dashboard/customer-dashboard.component';@NgModule({     imports: [    CommonModule  ],  declarations: [    CustomerDashboardComponent  ],  exports: [    CustomerDashboardComponent  ]})export class CustomerDashboardModule {    }

CustomerDashboardComponent出现在了顶部的 JavaScript 导入列表里，并且被添加到了 declarations数组中，它会让 Angular 把新组件和这个特性模块联系起来。

• imports：导入其他module，其它module暴露的出的Components、Directives、Pipes等可以在本module的组件中被使用。比如导入CommonModule后就可以使用NgIf、NgFor等指令。
• exports declarations的子集。作用是导出类以便其他模块的组件模板使用。
  特指组件模版。比如后文中根模块引用子模块的标签

• declarations 模块内部Components/Directives/Pipes的列表，声明一下这个模块内部成员。
• providers: 服务提供商。模块会将这些服务加入全局服务集，这样在app的任何位置都可以使用加入的服务。
  providers暂没列出，可以定义一个空数组。

导入特性模块

要想把这个特性模块包含进应用中，你还得让根模块app.module.ts知道它。注意，在 customer-dashboard.module.ts 文件底部 CustomerDashboardModule 的导出部分。这样就把它暴露出来，以便其它模块可以拿到它。要想把它导入到 AppModule 中，就把它加入 app.module.ts 的导入表中，并将其加入 imports 数组：

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 belowimport {    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 并不会暴露出它们的组件。这是官网原文，是什么意思呢？我才就是你在子模块中通过provide声明注入的类似工具类实例，在根组件中也能直接访问了。

渲染特性模块的组件模板

在根组件中，引用子模块的指令

  {   {   title}}