离子4:“加载控制器"在present()之前调用dismiss()，它将保持微调器不关闭 [英] Ionic 4: "Loading Controller" dismiss() is called before present() which will keep spinner without dismissing

问题描述

我使用了离子加载控制器"来显示微调器，直到检索到数据为止，然后调用"dismiss()"将其关闭. 它可以正常工作，但是有时当应用程序已经有数据时，会在"create()"和"present()"完成之前调用"dismiss()"，这将保持微调器不关闭...

I used "Ionic Loading Controller" to show a spinner until the data is retrieved then it calls "dismiss()" to dismissed it. it works fine, but sometimes when the app already have the data, the "dismiss()" is called before the "create()" and "present()" is done which will keep the spinner without dismissing...

我试图在"loadingController.present().then()"中调用数据，但这导致数据变慢...

I tried to call the data inside "loadingController.present().then()", but that caused the data to be slower...

这是一个错误吗? 如何解决这个问题?

is this a bug? how to solve the this issue?

我的代码示例:

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();
}

推荐答案

这就是我解决问题的方式.

this is how I solved my issue..

当调用dismiss()时，我使用了一个布尔变量"isLoading"将其更改为false. present()完成后，如果"isLoading" === false(表示已调用dismiss())，则它将立即关闭.

I used a boolean variable "isLoading" to change to false when dismiss() is called. after present() is finished if "isLoading" === false (means dismiss() already called) then it will dismiss immediately.

此外，我在服务中编写了代码，因此不必在每个页面中再次编写代码.

also, I wrote the code in a service so I don't have to write it again in each page.

loading.service.ts

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

然后只需从页面中调用present()和dismiss().

then just call present() and dismiss() from the page.

有关示例:

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();
    }
  );

这篇关于离子4:“加载控制器"在present()之前调用dismiss()，它将保持微调器不关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！