[譯] 監聽 Angular 啟動過程

cjie 發布于2019-08-22 15:59 / 1271人閱讀

摘要：比如下面代碼讓初始化延遲秒執行當然你可以定義多個回調函數另外一個可以監聽程序啟動過程的地方就是使用方法這里你可以拿到被啟動模塊的對象引用，并通過該對象拿到和。

原文鏈接： Hooking into the Angular bootstrap process

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

APP_BOOTSTRAP_LISTENER

可以為 APP_BOOTSTRAP_LISTENER 令牌注冊監聽器來監聽 Angular 啟動過程，比如看看 Angular 源碼 里是如何使用的：

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() 函數會在初始化程序時被調用（譯者注：這句可參考 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) => {
        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 。

云服務器 GPU云服務器 tomcat啟動監聽服務器監聽怎么啟動啟動linux過程 linux啟動過程圖

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93930.html

[譯] 如何使用 TypeScript 編寫自定義 AngularJS 指令？

摘要：在這篇文章中，我將告訴你如何用編寫自定義指令。中的自定義指令讓我們來創建一個只為任何的塊，小部件或者人名在右邊添加標題，子標題和文本的指令。另外，設置了指令的使用級別給元素和屬性，分別使用和表示。原文鏈接 : How to write custom AngularJS Directive using TypeScript?原文作者 : Siddharth Pandey譯者 : 李林璞...

CloudwiseAPM 2019-08-21 10:56 評論0 收藏0
[譯] $digest 在 Angular 中重生

摘要：但如果一個組件在生命周期鉤子里改變父組件屬性，卻是可以的，因為這個鉤子函數是在更新父組件屬性變化之前調用的注即第步，在第步之前調用。原文鏈接：Angular.js’ $digest is reborn in the newer version of Angular showImg(https://segmentfault.com/img/remote/146000001468785...

incredible 2019-08-26 11:52 評論0 收藏0
【譯】JavaScript 框架的探索與變遷（下）

摘要：對此沒有任何限制，它不關心這個。一種控制變化的辦法是不可改變的，持久化的數據結構。總結檢測變化時開發中的核心問題，而框架們以各種方式解決這個問題。因為組件內的變化是不被允許的。 AngularJS：臟檢查我不知道什么更新了，所以當更新的時候，我只能檢查所有的東西。 AngularJS 類似于 Ember，當狀態改變的時候，必須人工去處理。但不同的是，AngularJS 從不同的角度來...

CollinPeng 2019-08-21 17:53 評論0 收藏0
【譯】JavaScript 框架的探索與變遷（上）

摘要：正文在年，框架的選擇并不少。特別的，通過思考這些框架分別如何處理狀態變化是很有用的。本文探索以下的數據綁定，的臟檢查的虛擬以及它與不可變數據結構之間的聯系。當狀態產生變化時，只有真正需要更新的部分才會發生改變。譯者言近幾年可謂是 JavaScript 的大爆炸紀元，各種框架類庫層出不窮，它們給前端帶來一個又一個的新思想。從以前我們用的 jQuery 直接操作 DOM，到 Backb...

Jaden 2019-08-21 17:22 評論0 收藏0
Angular 4 簡單入門筆記

摘要：首先，我們需要在入口頁面的中配置根路徑然后創建一個路由模塊路由配置在主模塊中導入配置好的路由模塊而在頁面中需要一個容器去承載上面代碼中的定義了用戶點擊后的路由跳轉，定義該路由激活時的樣式類。剛實習的時候用過AngularJS，那時候真的是連原生JavaScript都不會寫，依樣畫葫蘆做了幾個管理后臺。然后突然換項目了，AngularJS就不寫了，感覺前前后后接觸了一年多的Angula...

whlong 2019-08-20 17:44 評論0 收藏0