有时,你需要在 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 星期三 深圳
原文地址:https://www.jb51.cc/angularjs/146434.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。