在ionic2中防止重复的Toast消息

Question

我在我的项目中实现了toast使用.目前我正面临重复消息的问题.有没有办法防止ionic2/angular2中的toast消息重复/重叠ToastControllerionic2toast

(注:指复制,当我点击一个按钮,我显示敬酒,如果我点击同一个按钮多次敬酒的消息重叠的)？

码

export class <className>{
   constructor(private toast:ToastController){
   }
    showToast(message) {
    let toast = this.toastCtrl.create({
        message: message,
        duration: 2000,
        position: 'bottom'
    })
    toast.present();
   }
}

我在点击按钮时调用此方法.

编辑

1. 与重复吐司(使用toastr示例,同样的sitaution适合我)

2. 当我启用"阻止通知"时,重复的吐司不在超时持续时间内.

任何帮助深表感谢.

Answer 1

在显示新的吐司之前，您可以使用该页面上的属性来了解是否正在显示吐司。

离子 2/3

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

// ...

private isToastVisible: boolean;

constructor(private toastCtrl: ToastController) { }

presentToast() {
  if(this.isToastVisible) {
    return;
  }

  this.isToastVisible = true;

  const toast: Toast = this.toastCtrl.create({
    message: 'User was added successfully',
    duration: 3000,
    position: 'top'
  });

  toast.onDidDismiss(() => {
    this.isToastVisible = false;
  });

  toast.present();
}

离子 4/5

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

// ...

private isToastVisible: boolean;

constructor(private toastCtrl: ToastController) { }

presentToast() {
  if(this.isToastVisible) {
    return;
  }

  this.isToastVisible = true;

  this.toastCtrl.create({
    message: 'User was added successfully',
    duration: 3000,
    position: 'top'
  }).then((toast: HTMLIonToastElement) => {

    toast.onDidDismiss().then(() => {
      this.isToastVisible = false;
    });

    toast.present();
  })      
}