bootstrap 期间的异步 HTTP 调用

Question

我目前正在构建一个 Angular 2 组件库，以便将来的 UI 项目可以共享实现标准功能的代码。我的要求之一是这些 UI 应用程序在启动时需要来自服务器的一些数据。我想将它封装在我的库中。

因此，当我将我的库中的服务注入我的应用程序时，我想对服务器端点执行 http 调用以获取一些配置。这可能在实例化时发生。

我不确定这是否是个好主意，Angular 2 bootstrap 例程是否会等待注入的服务完成 http 调用？

我见过几种不同的方法来异步 bootstrap 一个 Angular 2 应用程序，但我不想将此代码放在我的应用程序中，而是留在我的库中。我试图将这个过程的细节隐藏在我的库中，这样其他开发人员就不会试图破解它。

Answer 1

您可以利用 APP_INITIALIZER 服务。有了它，应用程序将等待返回的承诺在真正开始之前得到解决。

这是一个示例：

provide(APP_INITIALIZER, {
  useFactory: (service:SomeService) => () => service.init(),
  deps:[GlobalService, HTTP_PROVIDERS], multi: true
})

init 方法需要这样的东西：

init():Promise<Site> {
  var promise = this.http.get('config.json').map(res => res.json()).toPromise();
  promise.then(config => this.devServer = config.devServer);
  return promise;
}

有关详细信息，请参阅 github 上的此问题：

https://github.com/angular/angular/issues/9047

bootstrap 期间的异步 HTTP 调用

Async HTTP calls during bootstrap

angular

angular2-services