在Angular中定义共享的Providers

前端之家收集整理的这篇文章主要介绍了在Angular中定义共享的Providers前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

有时,你需要在 Angular 应用中创建一个共享模块,该模块定义了功能模块和lazy-loaded模块可以使用的服务,管道与指令。一个小问题就是服务,通常应该作为单例的服务可能会被多次提供。幸运的是,对于我们来说,通过在共享模块中定义一个返回ModuleWithProviders对象的静态方法forRoot,就可以轻松解决这个问题。

这是一个示例的实现,首先是我们定义的共享模块

  1. //: ./shared/shared.module.ts
  2.  
  3. import { NgModule,ModuleWithProviders } from '@angular/core';
  4.  
  5. import { MyDirective } from './my.directive';
  6. import { FunPipe } from './fun.pipe';
  7. import { SomeService } from './some.service';
  8.  
  9. @NgModule({
  10. declarations: [
  11. FunPipe,MyDirective
  12. ],exports: [
  13. FunPipe,MyDirective
  14. ]
  15. })
  16. export class SharedModule {
  17. static forRoot(): ModuleWithProviders {
  18. return {
  19. ngModule:SharedModule,providers:[ SomeService ]
  20. };
  21. }
  22. }

注意,我们如何在NgModule的元数据中像往常一样声明和导出我们的管道和指令,但是我们不提供服务。相反,我们在模块的类中定义一个静态方法forRoot,该方法返回一个实现 AngularModuleWithProviders 接口的对象。

现在,在我们的应用模块中,我们可以导入共享模块并调用forRoot静态方法来提供我们的服务:

  1. //: app.module.ts
  2. import { BrowserModule } from '@angular/platform-browser';
  3. import { NgModule } from '@angular/core';
  4. import { AppComponent } from './app.component';
  5. import { SharedModule } from './shared/shared.module';
  6.  
  7. @NgModule({
  8. declarations: [
  9. AppComponent
  10. ],imports: [
  11. BrowserModule,SharedModule.forRoot()
  12. ],bootstrap: [
  13. AppComponent
  14. ]
  15. })
  16. export class AppModule {}

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

最后,在任何功能模块中我们可以简单地导入没有forRoot的共享模块,同时我们可以访问共享管道和指令,而不再提供服务:

  1. //: some-feature.module.ts
  2.  
  3. import { NgModule } from '@angular/core';
  4. import { CommonModule } from '@angular/common';
  5.  
  6. import { SharedModule } from '../shared/shared.module';
  7.  
  8. //...
  9.  
  10. @NgModule({
  11. imports: [
  12. CommonModule,SharedModule
  13. ],declarations: [
  14. //...
  15. ]
  16. })
  17. export class SomeFeatureModule {}

就是如此简单!一个简单的小技巧,使它更容易使用共享模块和 lazy-loaded 模块。

天子骄子2017.8.16 星期三 深圳

猜你在找的Angularjs相关文章