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

问题描述

我使用Ionic Loading Controller"来显示一个微调器，直到数据被检索到然后它调用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..

我使用布尔变量isLoading"在调用dismiss() 时更改为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();
    }
  );

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