[解決済み] 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はインジェクターツリーを下から見ていきます。つまり、最下層のプロバイダが使用され、関連するインスタンスのスコープはこのレベルになります。
詳しくはこちらの質問をご覧ください。
関連
-
Angularインタビュー質問まとめ1~基礎知識(Angular v8+)編
-
[解決済み] TypeScriptで文字列を数値に変換する方法とは?
-
[解決済み] Angular HTMLバインディング
-
[解決済み] 現在のルートを取得する方法
-
[解決済み] Angularで変更検知を手動でトリガーする
-
[解決済み] Angularでは、アクティブなルートをどのように決定するのですか?
-
[解決済み】エラー NG6002: AppModule の NgModule.imports に表示されるが、NgModule クラスに解決できなかった。
-
[解決済み】Angularでルート変更を検出する方法は?
-
[解決済み] 複数のng-content
-
[解決済み] Angular 2でシングルトンサービスを作成するには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] コンストラクタとngOnInitの違いについて
-
[解決済み] Angular 2の "select "で新しい選択範囲を取得するにはどうすればよいですか?
-
[解決済み] 予算内の警告、初期値で最大値を超える
-
[解決済み] ngIf」は「div」の既知のプロパティではないため、バインドできない [重複] 。
-
[解決済み] Angularのルーティングされたコンポーネントにデータを渡すにはどうしたらいいですか?
-
[解決済み] Angular2の括弧、括弧、アスタリスクの違いは何ですか?
-
[解決済み] Angular 2.0のルーターがブラウザーの再読み込みで動作しない件
-
[解決済み] Angular2の変更検出:ネストされたオブジェクトに対してngOnChangesが発生しない
-
[解決済み] Angularチュートリアルのpipeメソッドとtapメソッドとは何ですか?
-
[解決済み] Angular Compiler は TypeScript >=3.4.0 と <3.5.0 を要求しているが、代わりに 3.5.3 が検出された