angular2+ は FactoryProvider と APP_INITIALIZER を使用してプロジェクト構成を初期化します

序文

この章の内容には、angular2 の依存関係の注入とマルチ注入についての一定の理解が必要です。

1. angular2 の依存性注入とは何ですか?

依存性注入について簡単に説明します: レストランに食事に行くとき、料理を注文する必要があります。食べたい料理を言うだけで、レストランのシェフが料理を作って提供するのを手伝ってくれます。目の前では、調理プロセス全体や、料理がどの原材料に依存しているかを心配する必要はありません。これが人生における依存性注入の定義です。

2. FactoryProvider インターフェイスの定義?

export interface FactoryProvider {
    
    
  provide: any;// 用于设置与依赖对象关联的Token值，Token值可能是Type、InjectionToken、OpaqueToken的实例或字符串
  useFactory: Function;// 设置用于创建对象的工厂函数
  deps?: any[]; // 依赖对象列表
  multi?: boolean;// 用于标识是否multiple providers，若是multiple类型，则返回与Token关联的依赖对象列表
}

この部分はsemlinker のボスによる依存性注入の詳細な説明から抜粋したものです各パラメータの意味を簡単に説明します必要なオブジェクトを取得するために使用する必要がある情報を提供します (これは、必要な料理の名前に相当します)注文する; useFactory はオブジェクトの作成を支援します。この機能は、料理を作ってくれるシェフに相当します。deps は、必要なオブジェクトを作成する他のオブジェクトのリストであり、調味料や原材料 (角切りなど) に相当します。鶏肉）炒め物（クンパオチキン）に必要; マルチはマルチインジェクションかどうかを識別するために使用され、調理に他の材料が必要な場合に相当するため、宣言する必要がありますmulti=true。他のオブジェクトに依存する必要がない場合に設定します。multi=false

3. FactoryProvider の用途は何ですか?

FactoryProvider は、useFactory に対応する関数を呼び出して、Token に対応する依存オブジェクトを返すようにインジェクターに指示するために使用されます。

4. APP_INITIALIZERの定義

export const APP_INITIALIZER = new InjectionToken<Array<() => void>>
('Application Initializer');

InjectionToken メソッドを使用して宣言します。InjectionToken 関数を通じて、APP_INITIALIZER に関連付けられたオブジェクトが配列であり、配列内の各要素が関数オブジェクトであることがわかります。

5. APP_INITIALIZER は何に役立ちますか?

このトークンは、システムの初期化に関連するプロバイダーを構成するために使用されます。

export function configFactory(config: AppConfig) {
    return function () { config.load(); } //返回一个函数对象
}

@NgModule({
      ...,
    providers: [
        // 系统启动时，加载项目的配置文件，如系统登录、首页模块的ApiUrl等信息
      { provide: APP_INITIALIZER, useFactory: configFactory, 
          deps: [AppConfig], multi: true }
    ]
})
export class AppModule { }

6. FactoryProvider と APP_INITIALIZER で何ができますか?

プロジェクトの構成を初期化できます。たとえば、インターフェイスを呼び出すとき、インターフェイスをより柔軟にして置換しやすくするために、通常、インターフェイスの前にある IP アドレスとポート番号を省略します。たとえば、次のようになります。前のものは省略しています (const url="mes/getMech"これはhttp://192.168.0.52:8080/私がランダムに作成した IP アドレスです) が、なぜこのように設計されているのでしょうか? 説明しましょう: テストデータには 1 つのデータベースを使用する場合がありますが、製品をリリースするときは別のデータベースを使用する必要があります。 IP アドレスを指定すると、すべての HTTP リクエストが取得されます。インターフェイスの前の IP アドレスとポート番号を変更する必要があります。ちょっと考えてみれば、これがどれほど素晴らしいプロジェクトであるかがわかるでしょう。ただし、FactoryProvider と APP_INITIALIZER を使用すると、これらの構成をグローバルクラスに保存すると、このクラスはプロジェクトの初期化時に使用されます。

7. プロジェクト初期化構成の具体的な実装は何ですか?

コードを簡単に分析します。this.http.get('assets/config/env.json')プロジェクトモードを取得して、this.env開発モード、リリースモードなどに保存します。env.json ファイル構成は次のとおりです。

プロジェクトモードを通じて各モードでプロジェクトの基本的な初期化構成を取得します。ここでは、prod、dev、test という 3 つのモードの構成があり、this.env.envその中で指定されたモードの構成を取得して、それに保存しますthis.config。3 つのモードの関連する構成を見てみましょう
(1) prod:

（2）開発者：

（3）テスト：

AppModule に挿入します。

8. 初期化シーケンスの確認

プロジェクトの開始時に APP_INITIALIZER が最も早く初期化されるかどうかを確認するには、AppConfig クラスと AppComponent クラスを比較して、どちらが最初に実行されるかを確認するだけです。AppComponent のコードを見てみましょう。

AppConfig クラスと AppComponent クラスのログ情報を比較することで結果を検証できます (両方を赤い四角でマークしました)。ログを通じて、確かに AppConfig クラスが

AppComponent クラスよりも前に実行されていることがわかりました。 AppConfig クラスが最初に実行されます。AppComponent が依存関係注入に AppConfig クラスを使用する場合、AppConfig クラスのメンバー変数はthis.config未定義ではなく、プロジェクトモードに対応した構成になります。