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.