时间戳

首页 > 解决方案 > 在等待 RxJS 可观察对象时在 Angular 中显示加载指示器

angular - 在等待 RxJS 可观察对象时在 Angular 中显示加载指示器

问题描述

我有一个 Angular 组件，它侦听路由参数以更改用户 ID，并在它发生更改时加载用户详细信息。用户详细信息需要几秒钟才能从 API 返回数据。

如果我正在查看用户 A 的详细信息，然后单击以查看用户 B 的详细信息，它将继续显示用户 A，直到在我单击几秒钟后返回用户 B 的详细信息。有没有办法在为用户 B 检索数据时显示加载指示器或将其空白？

用户详细信息组件：

ngOnInit(): void {
  this.userDetails = this.route.paramMap.pipe(
    switchMap((params: ParamMap) => this.userService.getUserDetails(+params.get('userId')))
  );
}

用户详细信息模板：

<div *ngIf="userDetails | async as userDetails">
  <h1>{{userDetails.firstName}} {{userDetails.lastName}}</h1>
</div>

如果内部 switchMap 当前正在运行，我希望用户详细信息 div 为空白或显示某种加载指示器。我知道一个选择是有一个加载变量，我在 switchMap 之前设置为 true，在 switchMap 之后设置为 false，并在 div 的 *ngIf 中使用它，但我希望有一种更流畅的方式不必有为每一种情况加载变量。

我有一个 StackBlitz 示例： https ://stackblitz.com/edit/angular-ng-busy-yxo1gu

目标是当我单击用户 B 按钮时，用户 A 信息应该在用户 B 加载时消失。我的应用程序中有几十个这样的场景，所以我正在寻找最干净的方法来做到这一点。

标签： angularrxjsobservable

解决方案

你可以改变你的 *ngIf

ngIf="userDetails | async as userDetails else #loading"

然后

<div #loading>
  loading...
</div>

参考

推荐阅读