在ionic2中防止重复的Toast消息 [英] Prevent duplicate Toast messages in ionic2

问题描述

我在 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消息重叠）？

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

当我启用阻止通知时，副本在超时持续时间内没有吐司。

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

非常感谢任何帮助。

推荐答案

您可以使用该页面中的属性来保留吐司的实例。然后，在显示吐司后，验证是否正在显示另一个。

You can use a property from that page to keep the instance of the toast. Then, after showing a toast, verify if another is being shown.

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

// ...

private toastInstance: Toast;

constructor(private toastCtrl: ToastController) { }

presentToast() {

  if(this.toastInstance) {
    return;
  }

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

  this.toastInstance.onDidDismiss(() => {
    this.toastInstance = null;
  });

  this.toastInstance.present();
}

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