angular - Ionic 4 加载符号在 observable 解析之前消失

Question

在导航到主屏幕之前，我几乎没有运行异步任务。我在启动这些任务之前启动了一个加载微调器，并在 ionViewWillLeave() 方法中关闭了加载微调器。

我的期望是，随着这些异步任务完成执行，加载微调器会继续加载，一旦完成，加载微调器只能从 ionViewWillLeave 方法中解除。

我当前的代码如下所示：

export class MyComponent implements OnInit{
      ngOnInit(){}
      buttonClicked(){
         this.ionLoadingService.present();
         zip(Obs1, Obs2).pipe(switchMap(()=>Obs3))
                        .subscribe(()=>{navigate('/app/home')});
      }
      ionViewWillLeave(){
        this.ionLoadingService.dismiss();
      }
}
export class IonLoadingService {

   public loadingElement: HTMLIonLoadingElement;
   private loaderPresented: boolean = false;
   constructor(private loadingController: LoadingController) {
   }

   async present() {
     if (!this.loaderPresented) {
       this.loaderPresented = true;
       this.loadingElement = await this.loadingController.create({
         cssClass: 'custom-loading'
      });
     return await this.loadingElement.present();
   }
 }

注意：所有的 observables 都是在角度区域之外运行的 API 调用。加载微调器的当前行为是，一旦这些外部 observable 开始执行，它就会消失。
如何解决这个问题？

标签： angularrxjsionic4