错误：未捕获（承诺中）：TypeError：无法读取离子 5 中未定义的属性“解雇”答案

【问题标题】：Error: Uncaught (in promise): TypeError: Cannot read property 'dismiss' of undefined in ionic 5错误：未捕获（承诺中）：TypeError：无法读取离子 5 中未定义的属性“解雇”
【发布时间】：2019-10-23 10:21:31
【问题描述】：

我正在使用 ionic 5 构建一个应用程序，我想在用户尝试登录时显示 ion-loader，并且在从服务器获得响应后，它将关闭 ion-loader，但是当我尝试它时，我收到了这个错误

Error: Uncaught (in promise): TypeError: Cannot read property 'dismiss' of undefined

这是我的代码

import { Component, OnInit } from '@angular/core';
import { HomePage } from '../home/home.page';
import { NavController, AlertController, LoadingController } from '@ionic/angular';
import { AuthServiceService } from '../auth-service.service';

@Component({
    selector: 'app-login',
    templateUrl: './login.page.html',
    styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

    ngOnInit() {
    } 
  registerCredentials = { email: '', password: '' };
  loaderToShow: any;
  constructor(
    public navCtrl: NavController, 
    private auth: AuthServiceService,
    private alertCtrl: AlertController,
    private loadingCtrl: LoadingController
  ) {
    console.log(this.registerCredentials);
  }

  public login() {
    this.showLoading();
    this.auth.login(this.registerCredentials).subscribe(allowed => {
      if (allowed) {        
        this.loaderToShow.dismiss();
        console.log('canceal')
      } else {
        this.showError('Access Denied');
      }
    }, error => {
      this.showError(error);
    });
  }

  public async showLoading() {
    this.loaderToShow = await this.loadingCtrl.create({
        message: 'Please Wait...'
    });
    await this.loaderToShow.present();
  }


  public async showError(text) {
    this.loaderToShow.dismiss();

    let alert = await this.alertCtrl.create({
        header: 'Fail',
        message: text,
      buttons: ['OK']
    });
    await alert.present();
  }

}

请问如何正确关闭离子加载器

【问题讨论】：

尝试将构造函数中的初始化从私有更改为公共：public loadingCtrl: LoadingController
我试过了，但它不起作用

标签： ionic-framework

【解决方案1】：

创建一个hideLoading() 方法，当你想隐藏加载圈时可以调用它。

async hideLoading() {
    this.loadingController.getTop().then(loader => {
      if (loader) {
        loader.dismiss();
      }
    });
}

我创建了下面的类来处理我的离子应用程序中加载的显示隐藏。

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 showLoading(message?: string) {
    this.isLoading = true;
    this.loadingController.create({
      message: message ? message : 'Please wait...'
    }).then(loader => {
      loader.present().then(() => {
        if (!this.isLoading) {
          loader.dismiss();
        }
      });
    });
  }

  async hideLoading() {
    this.isLoading = false;
    this.loadingController.getTop().then(loader => {
      if (loader) {
        loader.dismiss();
      }
    });
  }
}

在组件中的使用：

export class SomePage implements OnInit {

  subscription: Subscription;

  constructor(private loadingService: LoadingService) { }

  someMethod(updateNameForm: NgForm) {

     this.loadingService.showLoading();

     this.someService.someMethod().subscribe(response => {
         // Some code
     });

     this.subscription.add(() => {
          this.loadingService.hideLoading();
     });
    }
  }
}

【讨论】：

【解决方案2】：

解决方法是在函数showLoading的调用中加入await

 public login() {
        await this.showLoading();
        this.auth.login(this.registerCredentials).subscribe(allowed => {
          if (allowed) {        
            this.loaderToShow.dismiss();
            console.log('canceal')`enter code here`
          } else {`enter code here`
            this.showError('Access Denied');
          }
        }, error => {
          this.showError(error);
        });
        }

    async showLoading() {
        this.loaderToShow = await this.loadingCtrl.create({
            message: 'Please Wait...'
        });
        await this.loaderToShow.present();
    }


    async showError(text) {
    await this.loaderToShow.dismiss();

        let alert = await this.alertCtrl.create({
            header: 'Fail',
            message: text,
          buttons: ['OK']
        });
        await alert.present();
    }

【讨论】：