依存関係の注入は Angular 2 コンポーネントを超えてどのように機能しますか?

Angular 2 でのサービスの挿入 (ベータ版)

Angular 2 では、コンポーネントへのサービスの挿入は簡単ですが、どのように利用できますかコンポーネントを超えてサービスを転送するための依存関係注入 (DI)?

コンポーネントの外へのサービスの挿入

これを実現するには、必要なサービスに @Injectable デコレータでアノテーションを付けます。このデコレーターは、アノテーションが付けられたクラスのコンストラクター内のパラメーターが注入を受け取る必要があることを示します。

注入メカニズムを理解する

Angular 2 の DI メカニズムは、次のツリーで動作します。インジェクターは階層構造でリンクされます。これらのインジェクターはコンポーネント ツリーにマップされますが、サービスに特定のインジェクターはありません。

サービスに @Injectable アノテーションが付けられている場合、Angular は現在のインジェクター内でそのサービス タイプのインスタンスを作成または取得しようとします。実行チェーン。

例: サービス インジェクション チェーン

次のサンプル アプリケーションについて考えます。

• AppComponent (メイン コンポーネント)
• ChildComponent (サブコンポーネント)
• Service1 (ChildComponent によって使用されます)
• Service2 (Service1 によって使用されます)

各サービスとコンポーネントには @Injectable アノテーションが付けられます。

インジェクター階層とサービス インジェクション

このアプリケーションには、次の 3 つのインジェクターがあります。

• アプリケーション インジェクター (ブートストラップ中に構成)
• AppComponent インジェクター (プロバイダー属性を通じて構成)
• ChildComponent インジェクター (同様に構成)

Service1 を ChildComponent に挿入するとき、Angular はまず ChildComponent インジェクターで Service1 プロバイダーを検索します。

同様に、Service2 を Service1 に挿入するときも、同じ検索プロセスが発生します。

プロバイダー スコープとインジェクター階層

この検索プロセスは、サービス インスタンスをインスタンス化して共有する場所を決定します。プロバイダーはさまざまなレベルで指定できます。

• アプリケーション レベル: インスタンスはアプリケーション全体で共有されます。
• コンポーネント レベル: インスタンスは、コンポーネント、そのサブコンポーネント、および依存サービス内で共有されます。

結論

@Injectable デコレータを活用し、Angular 2 の DI メカニズムを理解することにより、コンポーネントとサービスの間にサービスを効果的に注入でき、次のことが可能になります。必要に応じて依存関係を整理して共有します。

以上が依存関係の注入は Angular 2 コンポーネントを超えてどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。