Ionic 4: "Contrôleur de chargement" ignore () est appelé avant present () qui gardera la rotation sans rejeter

Question

J'ai utilisé "Ionic Loading Controller" pour afficher un spinner jusqu'à ce que les données soient récupérées, puis il appelle "licencier ()" pour le licencier . Cela fonctionne correctement, mais parfois, lorsque l'application dispose déjà des données, le "licencier ()" "est appelé avant que" create () "et" present () "ne soit terminé, ce qui permet de conserver la rotation sans rejeter ...

J'ai essayé d'appeler les données à l'intérieur de "loadingController.present (). Then ()", mais les données ont été ralenties ...

est-ce un bug? Comment résoudre ce problème?

Exemple de mon code:

customer: any;

constructor(public loadingController: LoadingController, private customerService: CustomerService)

ngOnInit() {
  this.presentLoading().then(a => consloe.log('presented'));
  this.customerService.getCustomer('1')
  .subscribe(customer => {
    this.customer = customer;
    this.loadingController.dismiss().then(a => console.log('dismissed'));
  }
}

async presentLoading() {
  const loading = await this.loadingController.create({
    message: 'wait. . .',
    duration: 5000
  });
  return await loading.present();
}

Answer 1

voici comment j'ai résolu mon problème.

J'ai utilisé une variable booléenne "isLoading" pour passer à false lorsque l'appel () est appelé. alors après present () est fini si isLoading === false (signifie déjà appelé ()), puis il sera immédiatement renvoyé . de plus, j'ai écrit le code dans un service, donc je n'ai pas à l'écrire à nouveau dans chaque page .

chargement.service.ts

import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {

  isLoading = false;

  constructor(public loadingController: LoadingController) { }

  async present() {
    this.isLoading = true;
    return await this.loadingController.create({
      duration: 5000,
    }).then(a => {
      a.present().then(() => {
        console.log('presented');
        if (!this.isLoading) {
          a.dismiss().then(() => console.log('abort presenting'));
        }
      });
    });
  }

  async dismiss() {
    this.isLoading = false;
    return await this.loadingController.dismiss().then(() => console.log('dismissed'));
  }
}

ensuite, il suffit d'appeler present () et de rejeter () depuis la page.

l'exemple en question:

customer: any;

constructor(public loading: LoadingService, private customerService: CustomerService)

ngOnInit() {
  this.loading.present();
  this.customerService.getCustomer('1')
  .subscribe(
    customer => {
      this.customer = customer;
      this.loading.dismiss();
    },
    error => {
      console.log(error);
      this.loading.dismiss();
    }
  );

remarque: n'oubliez pas d'ajouter "LoadingService" aux fournisseurs d'AppModule