Ionique 4: “Chargement du Contrôleur” rejeter() est appelée (avant le présent), qui gardera spinner sans pour autant négliger

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

J'ai utilisé une variable booléenne "isLoading" pour changer de faux lors de la rejeter() est appelée.
après présente() est terminée si "isLoading" === false (ce qui signifie rejeter() appelle déjà), alors il sera de rejeter immédiatement.

aussi, j'ai écrit le code de service, de sorte que je n'ai pas à écrire de nouveau à chaque page.

de 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'));
  }
}

puis il suffit d'appeler présents() et rejeter() de 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" à AppModule de fournisseurs de

Je suis en utilisant une solution similaire, mais en s'appuyant sur les Ids des superpositions de chargement et de laisser le Ioniques Chargement Contrôleur à gérer la superposition doit être sur le dessus.

LoadingService

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

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

  constructor(public loadingController: LoadingController) { }

  async present(loadingId: string, loadingMessage: string) {
    const loading = await this.loadingController.create({
      id: loadingId,
      message: loadingMessage
    });
    return await loading.present();
  }

  async dismiss(loadingId: string) {
    return await this.loadingController.dismiss(null, null, loadingId);
  }
}

Composants/Services à l'aide de la LoadingService

import { LoadingService } from '../loading/loading.service';

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

  ...

  constructor(
    protected http: HttpClient,
    protected loading: LoadingService
  ) { }

  ...

  protected async loadMessagesOverview() {
    const operationUrl = '/v1/messages/overview';

    await this.loading.present('messagesService.loadMessagesOverview', 'Loading messages...');

    this.http.get(environment.apiUrl + operationUrl)
      .subscribe((data: Result) => {
        ...
        this.loading.dismiss('messagesService.loadMessagesOverview');
      }, error => {
        ...
        this.loading.dismiss('messagesService.loadMessagesOverview');
        console.log('Error getting messages', error);
      });
  }

}

Alors que la solution retenue peut marcher... je pense que c'est mieux d'avoir de l'1 chargement. Ma solution rejette une précédente chargement, s'il existe, et crée le nouveau. J'ai l'habitude de ne vouloir afficher 1 chargement à un moment (mon cas d'utilisation), de sorte que cette solution fonctionne pour moi.

La solution retenue pose le problème des orphelins de chargements. Mais c'est un bon point de départ .

Par conséquent, c'est ma proposé injectable service (vous pouvez surcharger avec plus ionique paramètres, si vous en avez besoin. Je n'ai pas besoin d'eux donc je n'ai pas ajouter de plus dans la fonction actuelle, mais ils peuvent être ajoutés en conséquence):

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

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

    currentLoading = null;

    constructor(public loadingController: LoadingController) {
    }

    async present(message: string = null, duration: number = null) {

        //Dismiss previously created loading
        if (this.currentLoading != null) {
            this.currentLoading.dismiss();
        }

        this.currentLoading = await this.loadingController.create({
            duration: duration,
            message: message
        });

        return await this.currentLoading.present();
    }

    async dismiss() {
        if (this.currentLoading != null) {

            await this.loadingController.dismiss();
            this.currentLoading = null;
        }
        return;
    }

}

J'ai eu le même problème, apparemment, j'ai pensé à Elle en identifiant d'abord le problème. Ce problème se produit lorsque la durée de ce Chargeur eu expiré alors qu'il est fondamentalement ai rejeté sans notre contrôle..

Maintenant, Il fonctionnera bien Jusqu'à ce que vous êtes aussi à l'aide de dismiss() MANUELLEMENT.

Donc, si vous allez utiliser dismiss() manuellement avec la durée, la suppression de la durée sur créer. ensuite, utilisez setTimeout() peut-être

//create loader
this.loader = this.loadingCtrl.create()

//show loader
this.loader.present().then(() => {})

//add duration here
this.loaderTimeout = setTimeout(() => {
    this.hideLoader()
}, 10000)

puis de créer votre cacher loader ici

//prepare to hide loader manually
hideLoader() {
   if (this.loader != null) {
      this.loader.dismiss();
      this.loader = null
    }

    //cancel any timeout of the current loader
    if (this.loaderTimeout) {
      clearTimeout(this.loaderTimeout)
      this.loaderTimeout = null
    }
}

même problème ici, et voici ma solution (ionique 4 et angulaire 7):

Commencé à partir de la solution admise.

le présent crée le chargement une fois
Dans la rejeter fonction, j'ai mis isShowing de faux seulement si dimiss retourne true

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

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

  isDismissing: boolean;
  isShowing: boolean;

  constructor(public loadingController: LoadingController) { 

  }

  async present() {
    if(this.isShowing){
      return
    }

    this.isShowing = true

    await this.loadingController.create({spinner: "dots"}).then(re => {
      re.present()
      console.log("LoadingService presented", re.id)
    })
  }

  async dismiss() {
    if(this.isShowing){
      await this.loadingController.dismiss().then(res => {
        if(res){
          this.isShowing = false
          console.log("LoadingService dismissed", res);
        }
      })
    }
  }
}