angular - ionic 4 : "Loading Controller" dismiss() is called before present() which will keep spinner without dismissing

Question

我使用“Ionic Loading Controller”来显示微调器，直到检索到数据，然后调用“dismiss()”将其关闭。它工作正常，但有时当应用程序已经有数据时，“dismiss()”在“create()”和“present()”完成之前被调用，这将保持微调器不被解雇...

我尝试调用“loadingController.present().then()”里面的数据，但是导致数据变慢了...

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

我的代码示例:

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

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

我使用 bool 变量“isLoading”在调用 dismiss() 时更改为 false。在 present() 完成后如果“isLoading”=== false(意味着 dismiss() 已经被调用)那么它会立即关闭。

此外，我在服务中编写了代码，因此不必在每个页面中都重新编写。

加载.服务.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()。

有问题的例子:

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