譯如何手動啟動 Angular 程式

angular 官方文件寫到，為了啟動 angular 程式，必須在main.ts檔案裡寫上如下**：

這行**platformbrowserdynamic()是為了構造乙個platform，angular 官方文件對platform的定義是（譯者注：為清晰理解，platform定義不翻譯）：

@ngmodule()

bootstrap屬性通常包含用來啟動程式的元件（譯者注：即根元件），angular 會在 dom 中查詢並匹配到該啟動元件的選擇器，然後例項化該啟動元件。

angular 啟動過程隱含了你想要哪乙個元件去啟動程式，但是如果啟動程式的元件是在執行時才被定義的該怎麼辦呢？當你獲得該元件時，又該如何啟動程式呢？事實上這是個非常簡單的過程。

假設我們有a和b兩個元件，將編碼決定執行時使用哪乙個元件來啟動程式，首先讓我們定義這兩個元件吧：

import  from '@angular/core';
@component()
export class acomponent {}
@component()
export class bcomponent {}

@ngmodule()

注意，這裡因為我們得自定義啟動程式，從而沒有在bootstrap屬性而是entrycomponents屬性中註冊這兩個元件，並且通過在entrycomponents註冊元件，angular 編譯器（譯者注：angular 提供了@angular/compiler包用來編譯我們寫的 angular **，同時還提供了@angular/compiler-clicli 工具）會為這兩個元件建立工廠類（譯者注：angular compiler 在編譯每乙個元件時，會首先把該元件類轉換為對應的元件工廠類，即 a.component.ts 被編譯為 a.component.ngfactory.ts）。因為 angular 會自動把在bootstrap屬性中註冊的元件自動加入入口元件列表，所以通常不需要把根元件註冊到entrycomponents屬性中。（譯者注：即在bootstrap屬性中註冊的元件不需要在entrycomponents中重複註冊）。

由於我們不知道a還是b元件會被使用，所以沒法在index.html中指定選擇器，所以index.html看起來只能這麼寫（譯者注：我們不知道服務端返回的是a還是b元件資訊）：

如果此時執行程式會有如下錯誤： }

讓我們寫乙個自定義方法bootstraprootcomponent來啟動根元件：

// name - name (selector) of the component to bootstrap

// define the possible bootstrap components

// with their selectors (html host elements)

// （譯者注：定義從服務端可能返回的啟動元件陣列）

const options = ;

// obtain reference to the dom element that shows status

// and change the status to `loaded`

//（譯者注：改變 id 為 #status 的內容）

const statuselement = document.queryselector('#status');

statuselement.textcontent = 'loaded';

// and add it to the dom

// （譯者注：建立乙個 dom 元素）

const componentelement = document.createelement(name);

const component = options[name];}

先構建乙個fetch方法來模擬http請求，該請求會在 2 秒後返回b元件選擇器即b-comp字串：

function fetch(url) , 2000);
});}

fetch('url/to/fetch/component/name')

}}這裡我做了個 stackblitz demo 來驗證該解決方法。（譯者注：譯者把該作者 demo 中 angular 版本公升級到最新版本 5.2.9，可以檢視angular-bootstrap-process當然可以，你僅僅需要預編譯所有元件，並使用元件的工廠類來啟動程式：

import from './components.ngfactory.ts'; @ngmodule() fetch('url/to/fetch/component/name') } const options = ;
...
記住我們不需要在entrycomponents屬性中註冊元件，因為我們已經有了元件的工廠類了，沒必要再通過 angular compiler 去編譯元件獲得元件工廠類了。（譯者注：components.ngfactory.ts是由angular aot compiler生成的，最新 angular 版本在 cli 裡隱藏了該資訊，在記憶體裡臨時生成***.factory.ts檔案，不像之前版本可以通過指令物理生成這中間臨時檔案，儲存在硬碟裡。）

譯如何手動啟動 Angular 程式

如何友好的啟動Angular應用

如何手動啟動消防廣播消防應急廣播應如何規範設定

Apache 如何手動安裝為服務並啟動執行？

譯 如何手動啟動 Angular 程式

如何友好的啟動Angular應用

如何手動啟動消防廣播 消防應急廣播應如何規範設定

Apache 如何手動安裝為服務並啟動執行？

相關推薦

譯如何手動啟動 Angular 程式

如何手動啟動消防廣播消防應急廣播應如何規範設定