在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应用程序，例如：

// 启动1require(["myAngular2App"], function(app) {   app.runAngular2App(legacyModel);});//  启动2Promise.resolve({data: 'example'}).then((legacyModel) => {    app.runAngular2App(legacyModel);})