Kiedy używać metody forRoot() Angulara

Problem : musieliśmy udostępnić usługę języka singleton we wszystkich leniwie ładowanych modułach. Przez rok widziałem metodę forRoot() i po prostu ignorowałem jej moc.

Objaśnienie : forRoot()Metoda zwraca NgModulezależności typu i dostawcy.

W tym przykładzie udostępniamy usługę, która pozwala na śledzenie wartości licznika. Za każdym razem, gdy jakikolwiek komponent zwiększa wartość przechowywaną w usłudze licznika, chcę udostępnić to wszystkim komponentom.

Problem pojawia się, gdy próbujesz wprowadzić leniwie ładowane moduły. Zwróć uwagę, że komponent ładowany z opóźnieniem nie ma tej samej wartości licznika. W przypadku korzystania wyłącznie z komponentów ładowanych z chciwością poniższy przykład zadziała, jeśli korzystasz z usługi współdzielonej, ale zwróć uwagę, jak zachowuje się komponent ładowany z opóźnieniem. Leniwy komponent pobiera własną instancję usługi.

import { NgModule } from '@angular/core';
import { CounterService } from './counter.service';
@NgModule({
  providers: [CounterService],
})
export class SharedModule {}

Rozwiązanie : wywołaj forRoot() w AppModule i zwróć ModuleWithProviders we współdzielonym module.

udostępniony.moduł.ts

import { NgModule,ModuleWithProviders  } from '@angular/core';
import { CounterService } from './counter.service';
@NgModule({
})
export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [ CounterService ]
    }
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { SharedModule } from './shared/shared.module';
import { AppComponent } from './app.component';
import { EagerComponent } from './eager.component';
import { routing } from './app.routing';
@NgModule({
  imports: [
    BrowserModule,
    SharedModule.forRoot(),
    routing
  ],
  declarations: [
    AppComponent,
    EagerComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Teraz usługa licznika jest współdzielona pomiędzy chętnie ładowanymi i leniwie ładowanymi modułami.

Inne polecane lektury:http://angularfirst.com/the-ngmodule-forroot-convention/

• Uwaga: nie zalecałbym umieszczania usług współdzielonych i dyrektyw współdzielonych w tym samym module. Napisałem ten artykuł jako odniesienie dla siebie w przyszłości.

Angularowe walidatory asynchroniczne