在Angular中定义共享的Providers

有时，你需要在 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 {}

你可能会注意到，你曾经在导入RouterModule模块并在应用程序中调用了静态方法forRoot时看到了这一点。

最后，在任何功能模块中我们可以简单地导入没有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 星期三深圳

在Angular中定义共享的Providers

相关文章