Ionic 4: "Loading Controller"在present()之前调用dismiss()会使得spinner无法消失

Question

Ionic 4: "Loading Controller"在present()之前调用dismiss()会使得spinner无法消失

angularionic-frameworkangular6loadingionic4

38

我使用了"Ionic Loading Controller"来展示一个旋转图标，直到数据被检索出来然后调用"dismiss()"方法来关闭它。它运行良好，但有时候当应用已经有了数据时，"dismiss()"方法会在"create()"和"present()"方法完成之前被调用，这将导致旋转图标无法关闭...

我尝试在"loadingController.present().then()"中调用数据，但这会使数据变慢...

这是一个bug吗？如何解决这个问题？

我的代码示例：

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

- rami bin tahin

你解决了吗？我也遇到了同样的问题。 - Onfire

我会给出我的解决方案作为答案，但我不确定这是否是最好的方法。 - rami bin tahin

23个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Faisal Rashid · Answer 1

尝试了所有方法后，这是我最终想出的方案。目前看起来运行良好。

尝试使用500毫秒间隔的setInterval。我还尝试保持函数非异步，以便在消费端轻松使用。

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

@Injectable({ providedIn: 'root' })
export class UiService {
    constructor(private loading: LoadingController) { }

    private loader: HTMLIonLoadingElement;
    private loaderLoading = false;

    public showLoading(message: string) {
        this.loaderLoading = true;
        this.loading.create({
            message,
            showBackdrop: true
        }).then(load => {
            this.loader = load;
            load.present().then(() => { this.loaderLoading = false; });
        });
    }

    public dismissLoading() {
        const interval = setInterval(() => {
            if (this.loader || !this.loaderLoading) {
                this.loader.dismiss().then(() => { this.loader = null; clearInterval(interval)});
            } else if (!this.loader && !this.loaderLoading) {
                clearInterval(interval);
            }
        }, 500);
    }
}

- John Nichole Martinez · Answer 2

我曾经遇到过同样的问题，后来通过先识别问题才弄清楚了。这个问题是由于Loader的持续时间过期导致的，因此它基本上是在没有我们完全控制的情况下被解雇了。

现在，只要你不使用dismiss()手动操作，就可以正常工作。

所以，如果您打算手动使用带有持续时间的dismiss()，请在创建时删除持续时间。然后或许可以使用setTimeout()。

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

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

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

然后在这里创建您的隐藏加载器

// 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
    }
}

- fifth · Answer 3

或者，您必须更改调用加载的代码，如下所示

async ngOnInit() {
  const loading = await this.loadingController.create();
  await loading.present();
  this.customerService.getCustomer('1')
  .subscribe(customer => {
    this.customer = customer;
    loading.dismiss();
  }
}