[翻訳]アングラー起動プロセスを監督する

原文のリンク:
Hooking into the Anglar boot strap process
Anglarはフレーム初期化プロセスを監督するいくつかの機構を提供しており、本明細書では主にこれらのメカニズムをどのように使用するかを模索している.
APP_.BOOTSTRAP_リマスターAPP_BOOTSTRAP_LISTENERトークンの登録モニターは、Anglarの起動プロセスを監督することができます.例えば、Anglarのソースコードを見てみてください.

private _loadComponent(componentRef: ComponentRef): void {
    this.attachView(componentRef.hostView);
    this.tick();
    this.components.push(componentRef);
    // Get the listeners lazily to prevent DI cycles.
    const listeners =
        this._injector.get(APP_BOOTSTRAP_LISTENER,[]).concat(this._bootstrapListeners);
    listeners.forEach((listener) => listener(componentRef));
  }

この_loadComponent()の関数は、初期化プログラムの際に呼び出されます.この関数を見ると、一つのコンポーネントがどのようにプログラムに追加されているかだけでなく、各起動コンポーネントについても知ることができます.Anglarは、application_ref.tsトークンを用いて登録されたモニターを実行し、その起動コンポーネントオブジェクトをパラメータとしてモニター関数に入力する.
これは、私たちがこれらのフックを使ってプログラム起動プロセスを監督し、カスタム初期化ロジックを実行することができます.例えば、APP_BOOTSTRAP_LISTENERモジュールが起動プロセスを監督し、いくつかの初期化プロセスを実行しました.
Anglarは初期化された起動コンポーネントのオブジェクトをパラメータとしてコールバック関数に送るので、このようにプログラムのルートコンポーネントのオブジェクトComponentRefを取得することができます.

import {APP_BOOTSTRAP_LISTENER, ...} from '@angular/core';
@NgModule({
  imports: [BrowserModule, ReactiveFormsModule, TasksModule],
  declarations: [AppComponent, BComponent, AComponent, SComponent, LiteralsComponent],
  providers: [{
    provide: APP_BOOTSTRAP_LISTENER, 
    multi: true, 
    useFactory: () => {
      return (component: ComponentRef) => {
        console.log(component.instance.title);
      }
    }
  }],
  bootstrap: [AppComponent]
})
export class AppModule {
}

上記のコードを実行した後、また公式文書を見ました.文書ではこう述べています.
All calbacks provided via this token will be caled for evercomponent that is boot straphed.Signature of the calback:RouterAPP_.INITIALIZER
Anglarはプログラム初期化前にフック機構を提供しています.Anglarフレームはplotformとaplicationという概念があります.Anglarは起動時にplotformを実例化して、それからaplicationです.一つのplotformは複数のアプリがありますが、playform-browser、playform-servicer-workerまたはplayformによって実行します.特定のplotformを環境実例化します.plotformとappicationの実例化過程についても、Anglarプログラムを手動で起動する方法を参照してください.その後、初期化後に検出とテンプレートレンダリングプロセスを変更します.この初期化プロセスの手順は(以下のソースはL 53です)です.

if (this.appInits) {
     for (let i = 0; i < this.appInits.length; i++) {
       const initResult = this.appInits[i]();
       if (isPromise(initResult)) {
         asyncInitPromises.push(initResult);
       }
     }
 }

したがって、(componentRef: ComponentRef) => voidトークンのために作ったように、ここでもAPP_BOOTSTRAP_LISTENERのためにコールバック関数を登録します.たとえば、次のコードは、Anglar初期化を5秒遅らせて実行させます.

{
  provide: APP_INITIALIZER,
  useFactory: () => {
    return () => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
        }, 5000);
      });
    }
  },
  multi: true
}

もちろん、複数のAPP_INITIALIZERコールバック関数を定義できます.

{
  provide: APP_INITIALIZER,
  useFactory: () => {
    return () => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
        }, 5000);
      });
    }
  },
  multi: true
},
{
  provide: APP_INITIALIZER,
  useFactory: () => {
    return () => {
      return new Promise.resolve(2);
    }
  },
  multi: true
}

ブックストリーム
もう一つのプログラム起動プロセスを傍受できるところはAPP_INITIALIZER方法を使うことです.

platform.bootstrapModule(AppModule).then((module) => {
  let applicationRef = module.injector.get(ApplicationRef);
  let rootComponentRef = applicationRef.components[0];
});

ここでは、モジュールを起動させる対象からNgModuleRefを引用し、その対象を通じてApple RefとComponentRefを取得することができます.