如何在 API 调用完成之前防止 Angular 4.0 中的应用程序组件呈现

Posted 2023-02-22

【中文标题】如何在 API 调用完成之前防止 Angular 4.0 中的应用程序组件呈现

【英文标题】：How To Prevent App Component Rendering in Angular 4.0 Until API Call Is Complete

【发布时间】：2017-11-15 16:49:07

【问题描述】：

我正在构建这个 Angular 4.0 应用程序来解析启动时的 URL（比如说 1.mysite.com 或 2.mysite.com，指向同一个 Angular 应用程序），我需要渲染在应用程序启动时进行 API 调用后，页面上的不同内容取决于不同的 URL。

我看到 在我的 API 调用完成之前呈现应用程序，然后在 API 调用完成后没有更新为正确的内容。具体来说，我有一个从 API 返回的 css 类名，我需要确保 Angular 应用程序在我获得该属性值（以及所有返回的内容）之前不会呈现，并且可以在我的查看模板。当 API 调用完成时，一些内容会正确更新，但是会更改 css/sass 值的少数属性没有及时设置，您只能在单击页面上的某些内容（如导航菜单项）后看到它们) 然后会显示不同的颜色和宽度等。

触发手动重新渲染不是这里的方法，因为页面会中断，并且您会在页面加载后看到草率的更新。我不希望用户看到这种情况，我只想在 API 调用完成后呈现完全呈现的页面，并且我知道我需要什么自定义 sass 主题以及所有这些爵士乐。

我已经看了好几天了，知道在这种情况下，生命周期钩子对我来说毫无用处，而且我想不出一种方法来强制同步调用来暂停 Angular 中正在进行的所有其他事情，直到它完成.非常感谢您的建议。

【问题讨论】：

你可以使用解析器，看看blog.thoughtram.io/angular/2016/10/10/…

【参考方案1】：

将指令*ngIf=""添加到模板中，直到服务返回http响应

【讨论】：

这是我尝试的第一件事，但它仍然允许内容以错误的类呈现。