Współdzielone moduły i iniekcja zależności
Teraz, kiedy udowodniliśmy, że załadowane z opóźnieniem moduły tworzą swoje własne gałęzie w drzewie Dependency Injection, musimy nauczyć się radzić sobie z usługami, które są importowane za pomocą wspólnego modułu zarówno w module załadowanym normalnie, jak i z opóźnieniem.
Stwórzmy nowy moduł o nazwie SharedModule
i określmy tam CounterService
.
app/shared/shared.module.ts
import { NgModule } from '@angular/core';
import { CounterService } from './counter.service';
@NgModule({
providers: [CounterService]
})
export class SharedModule {}
Teraz zaimportujemy SharedModule
wAppModule
i 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 {}
Dzięki tej konfiguracji komponenty obu modułów będą miały dostęp do CounterService
. Zamierzamy użyć tej usługi w EagerComponent
iLazyComponent
w dokładnie taki sam sposób. Wystarczy przycisk, aby zwiększyć wewnętrzną właściwość licznika
usługi.
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;
}
}
Zobacz przykład [072]
Jeśli spróbujesz uruchomić powyższy przykład, zauważysz, że counter
wydaje się zachowywać niezależnie wEagerComponent
i LazyComponent
. Możemy zwiększyć wartość jednego licznika bez zmiany drugiego. Innymi słowy, otrzymaliśmy dwa wystąpienia CounterService.
Jedno w katalogu głównym drzewa DI AppModule
, a drugie w dolnej gałęzi drzewa DI dostępnej przez LazyModule
.
W większości przypadków nie jest to, czego potrzebujemy. W następnym rozdziale zostanie pokazane, jak mieć tylko jedno wystąpienie usługi wspólnej.