在Angular中定义共享的Providers

前端之家收集整理的这篇文章主要介绍了在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,该方法返回一个实现 AngularModuleWithProviders 接口的对象。

现在,在我们的应用模块中,我们可以导入共享模块并调用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 星期三 深圳

原文链接:https://www.f2er.com/angularjs/146434.html

猜你在找的Angularjs相关文章