共享 Angular 模块

前提条件

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

• 特性模块
• JavaScript 模块与 NgModules。
• 常用模块。
• 路由与导航。
• 惰性加载模块。

创建共享模块能让你更好地组织和梳理代码。你可以把常用的指令、管道和组件放进一个模块中，然后在应用中其它需要这些的地方导入该模块。

想象某个应用有下列模块：

content_copyimport { CommonModule } from '@angular/common';import { NgModule } from '@angular/core';import { FormsModule } from '@angular/forms';import { CustomerComponent } from './customer.component';import { NewItemDirective } from './new-item.directive';import { OrdersPipe } from './orders.pipe'; @NgModule({ imports:      [ CommonModule ], declarations: [ CustomerComponent, NewItemDirective, OrdersPipe ], exports:      [ CustomerComponent, NewItemDirective, OrdersPipe,                 CommonModule, FormsModule ]})export class SharedModule { }

请注意以下几点：

• 它导入了 CommonModule，因为该模块需要一些常用指令。
• 它声明并导出了一些工具性的管道、指令和组件类。
• 它重新导出了 CommonModule 和 FormsModule

通过重新导出 CommonModule 和 FormsModule，任何导入了这个 SharedModule 的其它模块，就都可以访问来自 CommonModule 的 NgIf 和 NgFor 等指令了，也可以绑定到来自 FormsModule 中的 [(ngModel)] 的属性了。

即使 SharedModule 中声明的组件没有绑定过 [(ngModel)]，而且SharedModule 也不需要导入 FormsModule，SharedModule 仍然可以导出 FormsModule，而不必把它列在 imports 中。 这种方式下，你可以让其它模块也能访问 FormsModule，而不用直接在自己的 @NgModule 装饰器中导入它。

使用来自其它模块的组件和服务

在使用来自其它模块的组件和来自其它模块的服务时，有一个很重要的区别。 当你要使用指令、管道和组件时，导入那些模块就可以了。而导入带有服务的模块意味着你会拥有那个服务的一个新实例，这通常不会是你想要的结果（你通常会想取到现存的服务）。使用模块导入来控制服务的实例化。

获取共享服务的最常见方式是通过 Angular 的依赖注入系统，而不是模块系统（导入模块将导致创建新的服务实例，那不是典型的用法）。

要进一步了解共享服务，参见服务提供商。

关于 NgModule 的更多知识link

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

• 服务提供商。
• 特性模块的分类。