Question

有没有一种方法可以在执行observable之前显示加载器，并在加载器完全执行后隐藏它。

以下是我的观察结果。

 return Observable.interval(60000).switchMap(() =>
            Observable.forkJoin(
                self.http.get(url1, { headers: headers, method: 'GET' }).map((res: Response) => res.json()),
                self.http.get(url2, { headers: headers, method: 'GET' }).map((res: Response) => res.json()),
                self.http.get(url3, { headers: headers, method: 'GET' }).map((res: Response) => res.json()),                    
            )
        )

订阅位于另一个组件

中

Answer 1

如果您想要完全可观察，首先必须决定如何编码加载状态。您可以使用您知道无效的值（例如null或undefined）来执行此操作。或者，您可以使用{isLoading: boolean, data: T}之类的对象包装模型，只要isLoading为true，data可以为undefined，您就会知道永远不要访问它，所以代码不会破坏。第一个选项在开始时更快，但第二个选项从长远来看更具可伸缩性，因为您可以编码更多状态，例如“错误”或“空”。

现在您使用startWith运算符。

data$ = getData().startWith(null).subscribe(data => { this.data =  data })

在您的模板中，您只是有条件地显示微调器：

<ng-container *ngIf="data$ | async as data else loading">
  {{ data | json }}
</ng-container>

<ng-template #loading>
  <my-spinner></my-spinner>
</ng-template>

在可观察的开始之前显示加载器

1 个答案: