Angular 依存性注入の説明

概要

依存性注入: デザインパターン

依存関係: プログラムに必要な特定のタイプのオブジェクト。

依存性注入フレームワーク: エンジニアリングフレームワーク

インジェクター: APIを使用して依存関係のインスタンスを作成する

プロバイダー: 作成方法は? （コンストラクター、エンジニアリング機能）

オブジェクト: コンポーネント、モジュールに必要な依存関係

高度な依存性注入 => Angularの依存性注入フレームワークは、親子階層型の注入タイプの依存性を提供します。

1. 依存性注入

クラスID {
  静的getInstance(型: 文字列): Id {
    新しいId()を返します。
  }
}

クラスアドレス{
  コンストラクター(州、市、地区、通り) {}
}

クラス Person {
  id: id;
  address: 住所;
  コンストラクタ() {
    this.id = Id.getInstance("idcard");
    this.address = new Address("北京", "背景", "朝陽区", "xx 街");
  }
}

問題: アドレスと ID の実装の詳細を知る必要があります。

ID と Address がリファクタリングされた後、Person はリファクタリング方法を知る必要があります。

プロジェクトの規模が大きくなるにつれて、統合の問題が発生する可能性が高くなります。

クラスID {
  静的getInstance(型: 文字列): Id {
    新しいId()を返します。
  }
}

クラスアドレス{
  コンストラクター(州、市、地区、通り) {}
}

クラス Person {
  id: id;
  address: 住所;
  コンストラクター(id: Id, address: Address) {
    id は、
    this.address = アドレス;
  }
}

主要（）{
  //構築依存オブジェクトを前のレベルにプッシュします。ここで、const id = Id.getInstance("idcard");
  const address = new Address("北京", "背景", "朝陽区", "xx 街");
  const person = new Person(id, address);
}

当該人物はIDと住所の詳細を知りません。

これは依存性注入の最も単純な形式です。

問題は、メインの詳細をまだ知っておく必要があることです。

アイデア: すべてのオブジェクトの構築を処理するエントリ関数に到達するまで、一度に 1 レベルずつ上に押し上げます。構築後、サブクラスはすべての依存サブモジュールに提供されます。

問題: エントリ機能の保守が困難です。そのため、依存性注入フレームワークが必要になります。

2. Angularの依存性注入フレームワーク

v5 からは、速度が遅く、大量のコードが導入されるため非推奨となり、Injector.create に置き換えられました。

ReflectiveInjector: オブジェクトをインスタンス化し、依存関係を解決するために使用されます。 import { Component ,ReflectiveInjector } from "@angular/core";resolvedAndCreate は、オブジェクトの構築方法をインジェクターに指示するプロバイダー配列を受け取ります。

コンストラクタ() {
    //プロバイダー配列を受け取る const injector = ReflectiveInjector.resolveAndCreate([
      {
        provide:Person、useClass:Person を指定します。
      },
      {
        提供: アドレス、useFactory: ()=>{
          if (環境.production) {
            return new Address("北京", "背景", "朝陽区", "xx番地、xx街");
          }それ以外{
            新しい住所を返します("チベット", "ラサ", "xx 地区", "xx 通り xx 番地")。
          }
        }
      },
      {
        提供:Id、useFactory:()=>{
          Id.getInstance('idcard') を返します。
        }
      }
    ]);
  }

インジェクター:

インジェクターはメイン関数と同等であり、依存関係プール内のすべてのものを取得できます。

"@angular/core" から { Component 、ReflectiveInjector、Inject} をインポートします。
"@angular/cdk/overlay" から OverlayContainer をインポートします。
"@angular/compiler" から { 識別子 } をインポートします。
"@angular/animations" から { stagger } をインポートします。
'src/environments/environment' から { environment } をインポートします。

@成分（{
  セレクタ: "app-root",
  テンプレート URL: "./app.component.html",
  スタイル URL: ["./app.component.scss"]
})
クラスAppComponentをエクスポートします。

  コンストラクター(プライベート oc: OverlayContainer) {
    //プロバイダー配列を受け取る const injector = ReflectiveInjector.resolveAndCreate([
      {
        provide:Person、useClass:Person を指定します。
      },
      {
        提供: アドレス、useFactory: ()=>{
          if (環境.production) {
            return new Address("北京", "背景", "朝陽区", "xx番地、xx街");
          }それ以外{
            新しい住所を返します("チベット", "ラサ", "xx 地区", "xx 通り xx 番地")。
          }
        }
      },
      {
        提供:Id、useFactory:()=>{
          Id.getInstance('idcard') を返します。
        }
      }
    ]);
    Person をインスタンス化します。
    console.log(JSON.stringify(person));
  }

}

クラスID {
  静的getInstance(型: 文字列): Id {
    新しいId()を返します。
  }
}

クラスアドレス{
  プロバイダー: 文字列;
  都市: 文字列;
  地区:文字列;
  ストリート:文字列;
  コンストラクタ(州、市、地区、通り) {
    this.provice=提供します;
    this.city=都市;
    this.district=地区;
    this.street=ストリート;
  }
}

クラス Person {
  id: id;
  address: 住所;
  コンストラクター(@Inject(Id) id、@Inject(Address )アドレス) {
    id は、
    this.address = アドレス;
  }
}

コンソールに個人情報が出力されていることがわかります。

略語：

 // {
      // provide: Person、useClass: Person
      // },
      Person、//略称はPerson

Angular フレームワークでは、フレームワークがさまざまなことを実行し、プロバイダー配列に登録されたものは自動的にプールに登録されます。

@Ngモジュール({
  インポート: [HttpClientModule、SharedModule、AppRoutingModule、BrowserAnimationsModule]、
  宣言: [コンポーネント],
  エクスポート: [コンポーネント、AppRoutingModule、BrowserAnimationsModule]、
  プロバイダー:
    {provide:'BASE_CONFIG'、useValue:'http://localhost:3000'}
  ]
})

  コンストラクター(@Inject('BASE_CONFIG') config) {
    console.log(config); //コンソールにhttp://localhost:3000が出力される
  }

毎回新しいインスタンスを挿入したい場合、Angular はデフォルトでシングルトンになります。方法は2つあります。

まず、戻るときに、オブジェクトではなくメソッドを返します。

{
    提供: アドレス、useFactory: ()=>{
        戻り値 () =>{
            if (環境.production) {
                return new Address("北京", "背景", "朝陽区", "xx番地、xx街");
            }それ以外{
                新しい住所を返します("チベット", "ラサ", "xx 地区", "xx 通り xx 番地")。
            }
        }
    }
},

2. 親子インジェクターを使用します。

コンストラクター(プライベート oc: OverlayContainer) {
    //プロバイダー配列を受け取る const injector = ReflectiveInjector.resolveAndCreate([
      人、
      {
        提供: アドレス、useFactory: ()=>{
          if (環境.production) {
            return new Address("北京", "背景", "朝陽区", "xx番地、xx街");
          }それ以外{
            新しい住所を返します("チベット", "ラサ", "xx 地区", "xx 通り xx 番地")。
          }
        }
      },
      {
        提供:Id、useFactory:()=>{
          Id.getInstance('idcard') を返します。
        }
      }
    ]);

    定数 childInjector = injector.resolveAndCreateChild([Person]);

    Person をインスタンス化します。
    console.log(JSON.stringify(person));
    personFromChild = childInjector.get(Person);
    console.log(person===personFromChild); //false
  }

子インジェクターが依存関係を見つけられない場合は、親インジェクター内で依存関係を探します。

以上がAngular依存性注入の詳しい説明です。Angularについてさらに詳しく知りたい方は、123WORDPRESS.COMの関連記事もぜひご覧ください！

以下もご興味があるかもしれません: