Javascript 多个装载指示器相互上方显示

我有一个在爱奥尼亚3中制作的应用程序，我在其中创建了一个提供者来集中访问LoadingController

我已经实现了如下代码所示的提供者，我认为它足以控制应用程序中任何地方的加载指示器

我不知道如何实例化，但有时会实例化多个指标实例，即使在实例化新指标之前进行if（！this.isShowing（））验证也是如此

有人能帮我弄清楚发生了什么事吗？提前谢谢

import { Injectable } from '@angular/core';
import { LoadingController, Loading, Platform } from 'ionic-angular';
import { BehaviorSubject } from 'rxjs';

export enum LoadingStatus {
  SHOWING,
  DISMISSED,
}

@Injectable()
export class LoadingProvider {
  private loading: Loading = null;
  private status: BehaviorSubject<LoadingStatus> = new BehaviorSubject(LoadingStatus.DISMISSED);

  constructor(private loadingCtrl: LoadingController, private platform: Platform) {
    this.platform.ready().then(() => {
      this.status.next(LoadingStatus.DISMISSED);
    });
  }

  async show(content?: string) {
    if (!this.isShowing()) {
      this.create(content);
      await this.loading.present();
    }
  }

  async dismiss() {
    if (this.isShowing()) {
      await this.loading.dismiss();
      this.loading = null;
    }
  }

  private create(content?: string) {
    this.loading = this.loadingCtrl.create({
      content: content ? content : 'Carregando...',
      showBackdrop: true,
      enableBackdropDismiss: true,
    });

    this.loading.didEnter.subscribe(() => {
      if (this.status.getValue() === LoadingStatus.DISMISSED) {
        this.updateLoadingStatus(LoadingStatus.SHOWING);
      }
    });

    this.loading.didLeave.subscribe(() => {
      if (this.status.getValue() === LoadingStatus.SHOWING) {
        this.updateLoadingStatus(LoadingStatus.DISMISSED);
      }
    });
  }

  private async updateLoadingStatus(status: LoadingStatus) {
    this.status.next(status);
  }

  private isShowing(): boolean {
    return this.status.getValue() === LoadingStatus.SHOWING;
  }
}

从'@angular/core'导入{Injectable}；
从“离子角度”导入{LoadingController，Loading，Platform}；
从“rxjs”导入{BehaviorSubject}；
导出枚举加载状态{
显示，
解雇，
}
@可注射（）
导出类加载提供程序{
私有加载：加载=null；
私有状态：BehaviorSubject=新的BehaviorSubject（LoadingStatus.Disposed）；
构造函数（专用加载Ctrl:LoadingController，专用平台：平台）{
this.platform.ready（）。然后（（）=>{
this.status.next（LoadingStatus.disposed）；
});
}
异步显示（内容？：字符串）{
如果（！this.isShowing（））{
这个。创建（内容）；
等待此消息。加载.present（）；
}
}
异步解雇（）{
if（this.isShowing（））{
等待此消息。正在加载。解除（）；
this.loading=null；
}
}
私有创建（内容？：字符串）{
this.loading=this.loadingCtrl.create({
内容：内容？内容：“Carregando…”，
真的,，
enableBackDropDisclesh:true，
});
this.loading.dienter.subscribe（（）=>{
if（this.status.getValue（）==LoadingStatus.Discomered）{
this.updateLoadingStatus（LoadingStatus.SHOWING）；
}
});
this.loading.didLeave.subscribe（（）=>{
if（this.status.getValue（）==LoadingStatus.SHOWING）{
this.updateLoadingStatus（LoadingStatus.disposed）；
}
});
}
私有异步updateLoadingStatus（状态：LoadingStatus）{
this.status.next（状态）；
}
私有isShowing（）：布尔值{
返回此.status.getValue（）==LoadingStatus.SHOWING；
}
}

在加载程序进入之前，您不会更新加载状态。如果输入是异步的，则可能存在竞争条件：

调用

show（）

将创建一个加载程序

show（）

创建第二个加载程序

第一个加载程序进入，更新状态

---

我没有完整的答案，但是“this”指的是实例，所以检查“this”不会阻止另一个实例被实例化。