防止 Ionic 中出现重复的 Toast 消息 [英] Prevent duplicate Toast messages in Ionic

问题描述

我在 ionic2 项目中使用 ToastController 实现了 toast.目前我正面临重复 toast 消息的问题.有什么方法可以防止 ionic2/angular2 中 toast 消息的重复/重叠

I have implemented toast using ToastController in my ionic2 project . Currently i am facing an issue with the duplicate toast messages . Is there any way to prevent the duplication / overlapping of toast message in ionic2 / angular2

(注意:重复意味着当我点击一个按钮时，我正在显示一个 toast，如果我多次点击同一个按钮，toast 消息会重叠)?

(NB : Duplication means when I click on a button I am displaying a toast , if I click on the same button multiple times the toast messages overlaps ) ?

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

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

I am calling this method on an button click .

1. 带有重复的吐司(以使用 toastr 为例，同样的情况适用于我)

1. with duplicates toast (taken example using toastr , same sitaution is for me)

当我启用防止通知"时，重复的 toast 在超时时间内不存在.

when i enable "prevent notification" , the duplicate toast are not there within the timeout duration .

非常感谢任何帮助.

推荐答案

您可以使用该页面上的属性在显示新的 toast 之前知道是否正在显示.

You can use a property on that page to know if a toast is being shown or not before showing a new one.

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

这篇关于防止 Ionic 中出现重复的 Toast 消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！