在Ionic中防止重复的Toast消息

Question

我已经在我的ionic2项目中使用ToastController实现了提示消息，目前我正在遇到一个问题，即重复显示toast消息。有没有办法可以防止ionic2 / angular2中toast消息的重复/重叠？

（注：重复指当我点击按钮时显示toast，如果我多次点击同一按钮，则toast消息会重叠）？

代码

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

我在按钮点击事件中调用了这个方法。

编辑

1. 有重复的toast（使用toastr举例，我的情况也是一样的）。

2. 当我启用“阻止通知”时，在超时时间内不会出现重复的toast。

非常感谢任何帮助。

- Arj 1411

---

可能是 https://dev59.com/P1gQ5IYBdhLWcg3w1njm 的重复问题。 - Charlie Ng

可能有些不同，但我的问题是不想出现重复。 - Arj 1411

@AnandRaj。你能分享一下代码吗？如何从文本框设置动态消息到Toast中？ - user8531037

@Raghav 请在其中添加一个问题并分享URL。 - Arj 1411

@AnandRaj。你能分享一下你的代码，这样我就可以得到帮助了吗？ - user8531037

请添加一个新问题。这个问题与已回答的问题不同。 - Arj 1411

Answer 1

在显示新的提示信息之前，您可以在页面上使用一个属性来判断是否正在显示提示信息。

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

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

- sebaferreras

---

你好，这样做并不能防止重复吧？它会检查toastInstance，如果有的话就会关闭当前的并重新创建一个。我的目标是“即使多次点击同一个按钮，也只显示一次toast”。 - Arj 1411

哦，没错。我已经编辑了答案，这一次如果提示框正在显示，它不会被隐藏并且新的提示框也不会被创建。 - sebaferreras

抱歉，兄弟，它不起作用了。 它只显示一次提示，即使超时后也不会再显示提示。 我已经在我的问题中编辑了图片。 - Arj 1411

我已经尝试了你的答案。Toast 只会出现一次。但是当 Toast 超时后我再次点击按钮时，它没有显示 Toast。 - Arj 1411

非常感谢。我明白了。 - Arj 1411

Answer 2

我在我的toastr.js文件中将preventDuplicates设置为1，请参见以下内容;

function p() {
    return {
        tapToDismiss: !0,
        toastClass: "toast",
        containerId: "toast-container",
        debug: !1,
        showMethod: "fadeIn",
        showDuration: 300,
        showEasing: "swing",
        onShown: void 0,
        hideMethod: "fadeOut",
        hideDuration: 1e3,
        hideEasing: "swing",
        onHidden: void 0,
        closeMethod: !1,
        closeDuration: !1,
        closeEasing: !1,
        closeOnHover: !0,
        extendedTimeOut: 1e3,
        iconClasses: {
            error: "toast-error",
            info: "toast-info",
            success: "toast-success",
            warning: "toast-warning"
        },
        iconClass: "toast-info",
        positionClass: "toast-top-right",
        timeOut: 2e3,
        titleClass: "toast-title",
        messageClass: "toast-message",
        escapeHtml: !1,
        target: "body",
        // closeButton: true,
        closeHtml: '<button type="button">&times;</button>',
        closeClass: "toast-close-button",
        newestOnTop: !0,
        preventDuplicates: 1,
        progressBar: 1,
        progressClass: "toast-progress",
        rtl: !1
    }
}

- Phebian Chukwurah

Answer 3

var elems = document.querySelectorAll("ion-toast");
if (elems.length > 0) {
    for (var j = 0; j < elems.length; j++) {
        elems[j].style.transform = "translateY(" + j * 65 + "px)";
    }
}

- chaouachi hamed