[譯] 監聽 Angular 啓動過程

原文連接： Hooking into the Angular bootstrap process

Angular 提供了一些機制來監聽框架初始化過程，本文主要探索如何使用這些機制。

APP_BOOTSTRAP_LISTENER

能夠爲 APP_BOOTSTRAP_LISTENER 令牌註冊監聽器來監聽 Angular 啓動過程，好比看看 Angular 源碼 裏是如何使用的：

private _loadComponent(componentRef: ComponentRef<any>): 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() 函數會在初始化程序時被調用（譯者注：這句可參考 application_ref.ts 中 L245，L281， L463，L492），經過觀察這個函數不只知道一個組件是如何被添加到程序裏的（譯者注：該方法第三行），還能知道對於每個啓動組件，Angular 都會執行使用 APP_BOOTSTRAP_LISTENER 令牌註冊的監聽器，而且把該啓動組件對象做爲參數傳入監聽器函數中（譯者注：該函數第五行）。

這就意味着咱們可使用這些鉤子來監聽程序啓動過程，執行自定義的初始化邏輯，好比 Router 模塊 監聽啓動過程，並執行了一些 初始化過程。

因爲 Angular 把初始化後的啓動組件對象做爲參數傳給回調函數，因此咱們能夠像這樣拿到程序根組件對象 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<any>) => {
        console.log(component.instance.title);
      }
    }
  }],
  bootstrap: [AppComponent]
})
export class AppModule {
}
複製代碼

在運行完上面代碼後，我又查閱了官方文檔，文檔上是 這樣描述的（譯者注：爲清晰理解，該描述不翻譯）：

All callbacks provided via this token will be called for every component that is bootstrapped. Signature of the callback: (componentRef: ComponentRef) => void

APP_INITIALIZER

Angular 也在程序（application）初始化前提供了鉤子機制（譯者注：Angular 框架有 platform 和 application 概念，Angular 在啓動時會先實例化 platform，而後是 application，一個 platform 能夠有多個 application，而 platform 能夠有 platform-browser、platform-service-worker 或者 platform-server，由於 Angular 框架想作到跨平臺，因此它得根據當前運行環境實例化特定的 platform。關於 platform 和 application 實例化過程也可參考 如何手動啓動 Angular 程序），而後在初始化後就是變動檢測和模板渲染過程。這段 初始化過程步驟 是（譯者注：下面源碼是在 L53）：

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

因此，正如咱們爲 APP_BOOTSTRAP_LISTENER 令牌作的同樣，這裏也爲 APP_INITIALIZER 註冊回調函數。好比下面代碼讓 Angular 初始化延遲 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
}
複製代碼

BootstrapModule

另一個能夠監聽程序啓動過程的地方就是使用 bootstrapModule 方法：

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

這裏你能夠拿到被啓動模塊的對象引用 NgModuleRef ，並經過該對象拿到 ApplicationRef 和 ComponentRef 。