Angular 9 执行同步调用，在执行任何其他操作之前等待

Question

我有一个 Angular 9 应用程序，我想要的是当有人访问我的网站时，我执行同步的休息端点调用并使用接收数据我可以在不同的组件中填充数据，例如颜色和货币类型。如果没有这些信息，组件将无法生成正确的格式或颜色。

现在我有一个从 window.location.hostname 获取主机名的服务，然后我进行后端调用。我在网上看到你可以做一个 async 和 await 组合来使其余的调用同步。 await 效果很好，但 async 部分是一场灾难。我之所以这么说是因为这会导致网站的其余部分包括组件在内。这意味着组件缺少它们应该从服务中获取的信息，因为它们在服务仍在执行其余调用时继续加载/构建。

我需要一种在 Angular 中进行同步调用的方法，并让整个网站在下载该信息之前等待。我可以这样做吗？

Answer 1

考虑到浏览器 API 异步处理所有 ajax 和资产 http 调用，我认为这是不可能的，而且我知道这无法改变。另外，我不认为 async / await 会起作用，因为它们只是 promise api 的语法糖。你能试试这种方法吗？

• https://github.com/angular/angular/issues/9047#issuecomment-224075188
• https://dzone.com/articles/how-to-use-the-app-initializer-token-to-hook-into 我建议将它添加到 app.module 中的 providers[] 中，就像在第二个链接中一样：

   {
      provide: APP_INITIALIZER,
      useFactory: appInitializer,
      deps: [SomeService, ], // in case you need any dependencies
      multi: true,
    },