AngularのforRoot()メソッドを使うタイミング

問題: すべての遅延ロード モジュール間でシングルトン言語サービスを共有する必要がありました。1 年間、forRoot() メソッドを見ても、その威力を単に無視していました。

説明:メソッドは、およびそのプロバイダー依存関係forRoot()を返します。NgModule

この例では、カウンター値を追跡するためにサービスを共有しています。いずれかのコンポーネントがカウンター サービスに格納されている値を増やすたびに、これをすべてのコンポーネントと共有します。

問題は、遅延ロードされたモジュールを導入しようとするときです。遅延ロードされたコンポーネントが同じカウンター値を共有しないことに注意してください。積極ロードされたコンポーネントのみを使用する場合、共有サービスを使用すると以下の例は機能しますが、遅延ロードされたコンポーネントがどのように動作するかに注意してください。遅延コンポーネントは、サービスの独自のインスタンスを取得します。

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

解決策: AppModule でforRoot()を呼び出し、sharedModule で ModuleWithProviders を返します。

共有モジュール

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/

• 注: 共有サービスと共有ディレクティブを同じモジュールに配置することはお勧めしません。この記事は、将来の自分自身の参考として書きました。

Angular 非同期バリデータ