angular - 在等待 RxJS observable 时在 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