国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[譯] 監(jiān)聽 Angular 啟動過程

cjie / 1276人閱讀

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

原文鏈接： Hooking into the Angular bootstrap process

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

APP_BOOTSTRAP_LISTENER

可以為 APP_BOOTSTRAP_LISTENER 令牌注冊監(jiān)聽器來監(jiān)聽 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() 函數(shù)會在初始化程序時被調(diào)用（譯者注：這句可參考 application_ref.ts 中 L245，L281， L463，L492），通過觀察這個函數(shù)不僅知道一個組件是如何被添加到程序里的（譯者注：該方法第三行），還能知道對于每一個啟動組件，Angular 都會執(zhí)行使用 APP_BOOTSTRAP_LISTENER 令牌注冊的監(jiān)聽器，并且把該啟動組件對象作為參數(shù)傳入監(jiān)聽器函數(shù)中（譯者注：該函數(shù)第五行）。

這就意味著我們可以使用這些鉤子來監(jiān)聽程序啟動過程，執(zhí)行自定義的初始化邏輯，比如 Router 模塊監(jiān)聽啟動過程，并執(zhí)行了一些初始化過程。

由于 Angular 把初始化后的啟動組件對象作為參數(shù)傳給回調(diào)函數(shù)，所以我們可以像這樣拿到程序根組件對象 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 {
}

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

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）初始化前提供了鉤子機(jī)制（譯者注：Angular 框架有 platform 和 application 概念，Angular 在啟動時會先實(shí)例化 platform，然后是 application，一個 platform 可以有多個 application，而 platform 可以有 platform-browser、platform-service-worker 或者 platform-server，因?yàn)?Angular 框架想做到跨平臺，所以它得根據(jù)當(dāng)前運(yùn)行環(huán)境實(shí)例化特定的 platform。關(guān)于 platform 和 application 實(shí)例化過程也可參考 如何手動啟動 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);
       }
     }
 }

所以，正如我們?yōu)?APP_BOOTSTRAP_LISTENER 令牌做的一樣，這里也為 APP_INITIALIZER 注冊回調(diào)函數(shù)。比如下面代碼讓 Angular 初始化延遲 5 秒執(zhí)行：

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

當(dāng)然你可以定義多個 APP_INITIALIZER 回調(diào)函數(shù)：

{
  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

另外一個可以監(jiān)聽程序啟動過程的地方就是使用 bootstrapModule 方法：

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

這里你可以拿到被啟動模塊的對象引用 NgModuleRef ，并通過該對象拿到 ApplicationRef 和 ComponentRef 。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/93930.html

相關(guān)文章

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

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

    CloudwiseAPM 評論0 收藏0

  • [譯] $digest 在 Angular 中重生

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

    incredible 評論0 收藏0

  • 【譯】JavaScript 框架的探索與變遷（下）

    摘要：對此沒有任何限制，它不關(guān)心這個。一種控制變化的辦法是不可改變的，持久化的數(shù)據(jù)結(jié)構(gòu)。總結(jié)檢測變化時開發(fā)中的核心問題，而框架們以各種方式解決這個問題。因?yàn)榻M件內(nèi)的變化是不被允許的。 AngularJS：臟檢查 我不知道什么更新了，所以當(dāng)更新的時候，我只能檢查所有的東西。 AngularJS 類似于 Ember，當(dāng)狀態(tài)改變的時候，必須人工去處理。但不同的是，AngularJS 從不同的角度來...

    CollinPeng 評論0 收藏0

  • 【譯】JavaScript 框架的探索與變遷（上）

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

    Jaden 評論0 收藏0

  • Angular 4 簡單入門筆記

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

    whlong 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<