在Angular应用启动前获取数据并注入到应用中

在部分业务场景下，我们在启动客户端Angular应用时，可能需要将一些数据注入到Angular应用中，比如：配置文件信息－让应用根据不同的配置信息进行初始化操作，应用的遗留数据信息－实现应用的平滑升级等等。

如何实现这样的需求呢

要实现这样的需求，我们需要改变一下Angular应用的启动方式。我们将启动入口函数封装到另外的函数中，并将这个函数导出，导出的函数和普通的函数并没有任何区别。具体示例代码如下：

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

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

接下来，我们可以在Angular的服务，组件，指令中采用Angular提供的依赖注入模引用到我们注入的数据。

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

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

接下来，我们可以在任何地方调用我们导出的函数来启动Angular应用程序，例如：

// 启动1@H_502_11@
require@H_502_11@(["myAngular2App"@H_502_11@],function@H_502_11@(app)@H_502_11@ {@H_502_11@
   app.runAngular2App(legacyModel);
});

// 启动2@H_502_11@
Promise.resolve({data: 'example'@H_502_11@}).then((legacyModel) => {
    app.runAngular2App(legacyModel);
})