从浏览器重新加载页面时的角度异步请求答案

【问题标题】：Angular async requests when reloading page from browser从浏览器重新加载页面时的角度异步请求
【发布时间】：2020-03-31 01:25:35
【问题描述】：

我尝试过寻找解决方案，大多数人建议使用解析器，但就我而言，我认为这太复杂了，所以我真的需要关于如何做到这一点的建议。

应用概述：我有一个允许用户登录的平台（URL/app/login），一旦他们成功登录，他们将被重定向到仪表板（URL/app/dashboard）。当用户登录时，他们的令牌将存储在 cookie 中，我正在获取与该用户相关的多个数据。这将存储在组件dataServices 中。一切正常，但问题是当用户重新加载浏览器时，dataServices 将被异步填充，因此一些高度依赖于dataServices 的组件将在填充dataServices 之前首先被初始化。我能想到的一种方法是在“dataServices”中使用观察者并等到数据填满，然后通知主题。

有没有人对如何在角度上做到这一点有任何建议？（我对角度特别陌生，抱歉）

【问题讨论】：

如果您是 Angular 新手，请确保在开始之前对 RxJs 有一个很好的了解。我希望在我开始我的 Angular 之旅之前有人给我这个建议。 Angular 是建立在 RxJs 之上的，对它的理解将改变你编写代码的方式。

标签： angular angular-router angular-router-guards

【解决方案1】：

我这样做的方法是让路由器插座在数据加载时不呈现

在更高级别的组件中

<app-spinner *ngIf="loading$ | async else loaded"></app-spinner>
<ng-template #loaded>
  <router-outlet></router-outlet>
</ng-template>

这样，依赖于正在加载的父数据的子组件在加载数据之前不会呈现。

您可以阅读我在我写的这篇文章中使用的这种模式。 https://medium.com/@adrianbrand/angular-state-management-with-rxcache-part-2-12de225e4de0

【讨论】：

问题是，dataServices 中的数据在许多组件的 ngOninit() 中使用，所以我不确定这是否能解决我的问题
将加载微调器放在您的 app.component.html 中，在您分配给组件上的 loading$ observable 的 dataServices 上有一个 loading$ observable。这样，在 dataServices 中的数据准备好之前，任何组件都不会呈现。