原文链接:https://angular-2-training-book.rangle.io/handout/modules/shared-modules-di.html
现在我们已经证明,懒加载模块会在依赖注入树上创建了自己的分支,我们需要学习如何处理通过共享模块导入服务,这些服务被导入在一个普通模块和懒加载模块中。
我们来创建一个名为SharedModule的新模块,并在那里定义CounterService 服务。
app/shared/shared.module.ts
import { NgModule } from '@angular/core';
import { CounterService } from './counter.service';
@NgModule({
providers: [CounterService]
})
export class SharedModule {}
现在我们将在AppModule和SharedModule中导入LazyModule 。
app/app.module.ts
...
import { SharedModule } from './shared/shared.module';
@NgModule({
imports: [
SharedModule,
...
],
declarations: [
EagerComponent,
...
]
...
})
export class AppModule {}
app/lazy/lazy.module.ts
...
import { SharedModule } from '../shared/shared.module';
@NgModule({
imports: [
SharedModule,
...
],
declarations: [LazyComponent]
})
export class LazyModule {}
通过这种配置,两个模块的组件都可以访问CounterService 。 我们将以完全相同的方式在EagerComponent和LazyComponent中使用此服务。 只需一个按钮来增加服务的内部counter属性。
app/eager.component.ts
import { Component } from '@angular/core';
import { CounterService } from './shared/counter.service';
@Component({
template: `
<p>Eager Component</p>
<button (click)="increaseCounter()">Increase Counter</button>
<p>Counter: {{ counterService.counter }}</p>
`
})
export class EagerComponent {
constructor(public counterService: CounterService) {}
increaseCounter() {
this.counterService.counter += 1;
}
}
如果您使用实例,您将注意到该counter似乎在EagerComponent和LazyComponent中独立存在 ,我们可以增加一个计数器的值而不改变另一个计数器。 换句话说,我们已经拥有了两个CounterService实例,一个居住在AppModule的DI树的根目录下,另一个位于由LazyModule可访问的AppModuleDI树的下部分支中。
这不是必然的错误,你可能会发现你可能需要不同的同一个服务的实例,但是我绝对不是你想要的。 想想一个身份验证服务的例子,您需要具有相同的信息可用的相同的实例,无论我们是在一个热切或懒惰的加载模块中使用该服务。
在下一节中,我们将学习如何只有一个共享服务实例。