在Angular應用啓動前獲取數據並注入到應用中

在Angular應用啓動前獲取數據並注入到應用中

在部分業務場景下，我們在啓動客戶端Angular應用時，可能需要將一些數據注入到Angular應用中，比如：配置文件信息－讓應用根據不同的配置信息進行初始化操作，應用的遺留數據信息－實現應用的平滑升級等等。

如何實現這樣的需求呢

要實現這樣的需求，我們需要改變一下Angular應用的啓動方式。我們將啓動入口函數封裝到另外的函數中，並將這個函數導出，導出的函數和普通的函數並沒有任何區別。具體示例代碼如下：

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./src/app";

export function runAngular2App(legacyModel: any) {
       platformBrowserDynamic([
           { provide: "legacyModel", useValue: legacyModel }
       ]).bootstrapModule(AppModule)
       .then(success => console.log("Ng2 Bootstrap success"))
       .catch(err => console.error(err));
}

接下來，我們可以在Angular的服務，組件，指令中採用Angular提供的依賴注入模引用到我們注入的數據。

import { Injectable } from "@angular/core";

@Injectable()
export class MyService {
   constructor(@Inject("legacyModel") private legacyModel) {
      console.log("Legacy data — ", legacyModel);
    }
 }

接下來，我們可以在任何地方調用我們導出的函數來啓動Angular應用程序，例如：

// 啓動1
require(["myAngular2App"], function(app) {
   app.runAngular2App(legacyModel);
});

//  啓動2
Promise.resolve({data: 'example'}).then((legacyModel) => {
    app.runAngular2App(legacyModel);
})