cordova - ionic : How to not stack multiple toast notifications?

Question

我得到了以下用于在工业应用程序中显示警报/错误的 Ionic 代码片段:

showError(message: string) {
  let toast = this.toastController.create({
      message: message,
      position: 'top',
      duration: 5000,
      cssClass: 'danger',
      showCloseButton: true
  });
  toast.present();
}

应用程序每次检测到连接问题时都会触发错误消息，这也大致是在 5 秒计时器上。

如果更改此代码的时间，多次调用此方法将导致 2 条或更多错误消息相互叠加显示。我能以某种方式检测到已经显示了 toast 吗？此外，5000 毫秒计时器将不再是必需的，我可以在重新建立连接时再次删除错误消息。

谢谢 BR Florian

Answer 1

您可以将 Toast 对象存储在函数外部的变量中，并在显示下一个 toast 之前调用 dismiss() 方法:

ionic 4

import { ToastController } from '@ionic/angular';


toast: HTMLIonToastElement;    

showError(message: string) {
    try {
        this.toast.dismiss();
    } catch(e) {}

    this.toast = this.toastController.create({
        message: message,
        position: 'top',
        duration: 5000,
        color: 'danger',
        showCloseButton: true
    });
    toast.present();
}

ionic 3

import { ToastController, Toast } from 'ionic-angular';


toast: Toast;    

showError(message: string) {
    try {
        this.toast.dismiss();
    } catch(e) {}

    this.toast = this.toastController.create({
        message: message,
        position: 'top',
        duration: 5000,
        cssClass: 'danger',
        showCloseButton: true
    });
    toast.present();
}