angular - 如何在 Angular 7 中检查服务调用是否已完成？

Question

假设我在 ngOnInit 生命周期钩子上有一个特定的 fetch 服务调用。但是在该调用给出响应之前，我切换到另一个组件并返回到相同的第一个组件，因此另一个获取服务调用发生了。
我有一个附加到服务调用的 ngx-ui-loader。现在发生了什么，第一个服务调用给出了响应，因此加载程序停止，但 UI 没有更新。当第二个服务调用给出响应时，UI 得到了更新。

因此，在停止的加载程序和更新的 UI 之间存在一些时间延迟。

如何防止这种情况？或者
如何检查是否有任何相关的服务调用已经在进行中，然后我们可以再次订阅它并获得响应并更新 UI？

代码：component.ts

user:any = [];

ngOnInit() {
    this.commonService.getUserList().subscribe(response => {
        this.users = response.body;
    });
}

组件.html

<ng-container *ngFor="let user of users">
    <p>{{ user }}</p>
</ng-container>

标签： angulartypescriptrestangular7

Answer 1

您可以重构您的服务以重用数据。以这种方式，在您描述的场景中，这将只是一个 http 调用

private userList$ = this.http.get<User[]>('url').pipe(shareReplay(1));
public getUserList() {
   return this.userList$;
}