1. ホーム
  2. angular

[解決済み] Angular 2でシングルトンサービスを作成するには?

2022-04-27 22:18:35

質問

ブートストラップ時に注入すると、すべての子が同じインスタンスを共有するはずだと読みましたが、私のメインとヘッダコンポーネント(メインアプリはヘッダコンポーネントとルータアウトレットを含む)はそれぞれ私のサービスの別々のインスタンスを取得しています。

私は、facebook javascript apiへの呼び出しを行うために使用するFacebookServiceと、FacebookServiceを使用するUserServiceを持っています。 以下は、私のブートストラップです。

bootstrap(MainAppComponent, [ROUTER_PROVIDERS, UserService, FacebookService]);

ログを見ると、ブートストラップの呼び出しが終了した後、FacebookServiceとUserServiceが作成され、その後、各コンストラクタのコード、MainAppComponent、HeaderComponent、DefaultComponentが実行されているようです。

解決方法は?

ジェイソンの言うとおりです。これは、依存性注入の仕組みが原因です。これは階層型インジェクタをベースにしています。

Angular2アプリケーションの中には、複数のインジェクターが存在します。

  • アプリケーションのブートストラップ時に設定するルート
  • コンポーネントごとのインジェクター。あるコンポーネントを別のコンポーネントの内部で使用する場合。コンポーネントインジェクタは、親コンポーネントのインジェクタの子です。アプリケーションコンポーネント(アプリケーションのブーストラップ時に指定したもの)は、ルートインジェクタを親として持っています)。

Angular2がコンポーネントコンストラクタで何かをインジェクトしようとしたとき。

  • コンポーネントに関連するインジェクタを調べます。一致するものがあれば、それを使って対応するインスタンスを取得します。このインスタンスは遅延して生成され、このインジェクタのシングルトンとなります。
  • このレベルにプロバイダがない場合、親インジェクタを検索します(以下同様)。

したがって、アプリケーション全体でシングルトンを使用したい場合、ルートインジェクタまたはアプリケーションコンポーネントインジェクタのいずれかのレベルでプロバイダを定義する必要があります。

しかし、Angular2はインジェクターツリーを下から見ていきます。つまり、最下層のプロバイダが使用され、関連するインスタンスのスコープはこのレベルになります。

詳しくはこちらの質問をご覧ください。