Когда использовать метод Angular forRoot()

Проблема : нам нужно было использовать один языковой сервис для всех лениво загружаемых модулей. В течение года я видел метод forRoot() и просто игнорировал его мощь.

Объяснение : forRoot()Метод возвращает объект NgModuleи его зависимости от поставщика.

В этом примере мы делимся службой, чтобы не отставать от значения счетчика. Каждый раз, когда какой-либо компонент увеличивает значение, хранящееся в службе счетчиков, я хочу поделиться этим со всеми компонентами.

Проблема в том, что вы пытаетесь ввести лениво загружаемые модули. Обратите внимание, что загружаемый отложенно компонент не использует одно и то же значение счетчика. При использовании только нетерпеливых загружаемых компонентов приведенный ниже пример будет работать, если вы используете общую службу, но обратите внимание, как ведет себя лениво загружаемый компонент. Ленивый компонент получает собственный экземпляр службы.

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

Решение : вызовите forRoot() в AppModule и верните ModuleWithProviders в SharedModule.

общий.module.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 {}

Теперь служба счетчиков распределяется между активно загружаемыми и лениво загружаемыми модулями.

Другие рекомендуемые чтения:http://angularfirst.com/the-ngmodule-forroot-convention/

• Примечание. Я бы не рекомендовал размещать общие службы и общие директивы в одном модуле. Я написал эту статью как справочник для себя в будущем.

Угловые асинхронные валидаторы