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

Question

我有一个 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 加载时消失。我的应用中有几十个这样的场景，所以我正在寻找最干净的方法来做到这一点。

Answer 1

你可以改变你的 *ngIf

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

然后

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

Reference

Answer 2

如果您只想让内容消失，您可以在开始获取其他用户时发出例如null：

this.userDetails = this.userId.asObservable().pipe(
  switchMap(id => merge(
    of(null),
    this.getUserDetails(id)
  )),
);

merge Observable 创建方法将重新发出 emit null 然后等到 getUserDetails 完成。你甚至不需要ng-busy。

您更新的演示：https://stackblitz.com/edit/angular-ng-busy-vwteyf?file=src/app/app.component.ts

Answer 3

您可以使用ng-busy（或基本上任何其他 npm 组件）在您的应用中的每个 http 调用（在您的情况下为承诺或可观察的）显示加载指示器。

编辑：关于您使用 Observable 的事实，您可以使用 .toPromise 来使用 ng-Busy。修改了 DEMO 以向您展示如何做到这一点。

这是 ng-busy 的 Minimal, Complete, and Verifiable example，正在处理您的代码。