转自：https://segmentfault.com/a/1190000010700308
有时，你需要在 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 模块。