我有一个Angular组件,它侦听要更改用户ID的route参数,并在加载时加载用户详细信息。用户详细信息需要花费几秒钟的时间才能从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>
我希望用户详细信息div为空白或显示某种加载指示器(如果该内部switchMap当前正在运行)。我知道一个选择是将一个加载变量设置为true,在switchMap之前设置为true,在switchMap之后设置为false,并在div的* ngIf中使用该变量,但我希望可以采用一种简便的方法为这些情况中的每一种加载变量。
我有一个StackBlitz示例:https ://stackblitz.com/edit/angular-ng-busy-yxo1gu
目的是当我单击用户B按钮时,在加载用户B时用户A信息应消失。我的应用程序中有数十种这种情况,因此我正在寻找最干净的方法。
如果只希望内容消失,则可以在例如null
开始获取其他用户时发出:
this.userDetails = this.userId.asObservable().pipe(
switchMap(id => merge(
of(null),
this.getUserDetails(id)
)),
);
该merge
可观察到的创建方法将重新发射EMITnull
然后等待,直到getUserDetails
完成。您甚至不需要ng-busy
它。
您更新的演示:https : //stackblitz.com/edit/angular-ng-busy-vwteyf?file= src/app/ app.component.ts
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句