有时,你需要在 Angular 应用中创建一个共享模块,该模块定义了功能模块和lazy-loaded模块可以使用的服务,管道与指令。一个小问题就是服务,通常应该作为单例的服务可能会被多次提供。幸运的是,对于我们来说,通过在共享模块中定义一个返回
ModuleWithProviders
对象的静态方法forRoot
,就可以轻松解决这个问题。
这是一个示例的实现,首先是我们定义的共享模块
- //: ./shared/shared.module.ts
- import { NgModule,ModuleWithProviders } from '@angular/core';
- import { MyDirective } from './my.directive';
- import { FunPipe } from './fun.pipe';
- import { SomeService } from './some.service';
- @NgModule({
- declarations: [
- FunPipe,MyDirective
- ],exports: [
- FunPipe,MyDirective
- ]
- })
- export class SharedModule {
- static forRoot(): ModuleWithProviders {
- return {
- ngModule:SharedModule,providers:[ SomeService ]
- };
- }
- }
注意,我们如何在NgModule
的元数据中像往常一样声明和导出我们的管道和指令,但是我们不提供服务。相反,我们在模块的类中定义一个静态方法forRoot
,该方法返回一个实现 Angular
的 ModuleWithProviders
接口的对象。
现在,在我们的应用模块中,我们可以导入共享模块并调用forRoot
静态方法来提供我们的服务:
- //: app.module.ts
- import { BrowserModule } from '@angular/platform-browser';
- import { NgModule } from '@angular/core';
- import { AppComponent } from './app.component';
- import { SharedModule } from './shared/shared.module';
- @NgModule({
- declarations: [
- AppComponent
- ],imports: [
- BrowserModule,SharedModule.forRoot()
- ],bootstrap: [
- AppComponent
- ]
- })
- export class AppModule {}
最后,在任何功能模块中我们可以简单地导入没有forRoot
的共享模块,同时我们可以访问共享管道和指令,而不再提供服务:
- //: some-feature.module.ts
- import { NgModule } from '@angular/core';
- import { CommonModule } from '@angular/common';
- import { SharedModule } from '../shared/shared.module';
- //...
- @NgModule({
- imports: [
- CommonModule,SharedModule
- ],declarations: [
- //...
- ]
- })
- export class SomeFeatureModule {}
就是如此简单!一个简单的小技巧,使它更容易使用共享模块和 lazy-loaded
模块。
天子骄子2017.8.16 星期三 深圳