在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);
})