Несколько индикаторов загрузки, показанных друг над другом - PullRequest
Новая
       24

Несколько индикаторов загрузки, показанных друг над другом

1 голос
/ 04 марта 2020

У меня есть приложение, созданное в ioni c 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;
  }
}

1 Ответ

1 голос
/ 05 марта 2020

Вы не обновляете свой статус загрузки, пока не загрузится загрузчик. Если вход асинхронный, у вас есть возможность для условия гонки:

  1. show() называется
  2. Загрузчик создан
  3. show() вызывается снова чем-то другим
  4. Второй загрузчик создан
  5. Первый загрузчик входит, обновляя статус
...