Angular 在可观察的开始之前显示加载程序

有没有一种方法可以让我们在执行一个可观察对象之前显示一个加载器，在它完全执行之后隐藏它

下面是我可以观察到的

 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()),                    
            )
        )

---

订阅位于另一个组件中。如果您想完全可观察，首先必须决定如何对加载状态进行编码。您可以使用您知道无效的值（如

null

或

undefined

）来执行此操作。或者，您可以使用类似于

{isLoading:boolean，data:T}

的对象包装您的模型，只要

isLoading

为

true

，

数据可以
未定义
，您将知道永远不会访问它，因此代码不会中断。第一个选项在开始时执行得更快，但从长远来看，第二个选项更具可伸缩性，因为您可以对更多状态进行编码，例如“error”或“empty”

现在使用
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>


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

现在使用
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>


{{data}json}