angular - 引导过程中的异步 HTTP 调用

Question

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

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

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

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

Answer 1

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

这是一个示例:

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