Quando utilizzare il metodo forRoot() di Angular

Problema : avevamo bisogno di condividere un servizio linguistico singleton su tutti i moduli caricati lentamente. Per un anno ho visto il metodo forRoot() e ho semplicemente ignorato il suo potere.

Spiegazione : il forRoot()metodo restituisce un NgModulee le relative dipendenze del provider.

In questo esempio, stiamo condividendo un servizio per tenere il passo con un controvalore. Ogni volta che un componente incrementa il valore memorizzato nel servizio contatore, desidero condividerlo con tutti i componenti.

Il problema è quando si tenta di introdurre moduli caricati pigramente. Si noti come il componente caricato lazy non condivide lo stesso valore del contatore. Quando si utilizzano solo componenti caricati con entusiasmo, l'esempio seguente funzionerà se si utilizza un servizio condiviso, ma si noti come si comporta il componente caricato con entusiasmo. Il componente pigro ottiene la propria istanza del servizio.

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

Soluzione : chiamare forRoot() in AppModule e restituire un ModuleWithProviders in sharedModule.

modulo.condiviso.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 {}

Ora il servizio contatore è condiviso tra moduli caricati con entusiasmo e moduli caricati pigramente.

Altre letture consigliate:http://angularfirst.com/the-ngmodule-forroot-convention/

• Nota: non consiglierei di inserire servizi condivisi e direttive condivise nello stesso modulo. Ho scritto questo articolo come riferimento per me stesso in futuro.

Validatori asincroni angolari