開発者ドキュメント

Angularの共有モジュールでプロバイダーを定義する

Angularアプリで、機能モジュールと遅延読み込みモジュールが使用できるサービス、パイプ、ディレクティブを定義する共有モジュールを作成したい場合があります。 小さな問題の1つは、通常はシングルトンとして機能するはずのサービスが、特に遅延ロードされたモジュールの場合、複数回提供される可能性があることです。 ただし、幸いなことに、ModuleWithProvidersオブジェクトを返す共有モジュールで静的なforRootメソッドを定義することで、その特定のユースケースを簡単に修正できます。

これがサンプル実装です。 まず、共有モジュール:

./shared/shared.module.ts
import { NgModule, ModuleWithProviders } from '@angular/core';

import { MyDirective } from './my.directive';
import { FunPipe } from './fun.pipe';
import { SomeService } from './some.service';

NgModuleのメタデータで通常どおりパイプとディレクティブを宣言およびエクスポートする方法に注意してください。ただし、サービスは提供していません。 代わりに、AngularのModuleWithProvidersインターフェースを実装するオブジェクトを返すモジュールのクラスに静的forRootメソッドを定義します。


これで、アプリモジュールで、共有モジュールをインポートし、そのモジュールで forRoot を呼び出して、サービスを提供することもできます。

app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';

RouterModule をインポートし、アプリモジュールで forRoot を呼び出すと、これが実際に動作していることに気付くでしょう。


最後に、どの機能モジュールでも、 forRoot なしで共有モジュールをインポートするだけで、サービスを再度提供しなくても共有パイプとディレクティブにアクセスできます。

some-feature.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SharedModule } from '../shared/shared.module';
// ...

🍕それだけです! 共有モジュールと遅延ロードされた機能モジュールの操作を簡単にするためのちょっとしたコツ。

モバイルバージョンを終了