防止 Ionic 中出现重复的 Toast 消息

Question

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

（注意：重复意味着当我点击一个按钮时，我会显示祝酒词，如果我多次点击同一个按钮，祝酒词消息会重叠）？

代码

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

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

已编辑

with duplicates toast （以使用 toastr 为例，同样的情况适用于我）
当我启用 "prevent notification" 时，重复的 toast 在超时持续时间内不存在。

非常感谢任何帮助。

Answer 1

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

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

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
    }
}

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

防止 Ionic 中出现重复的 Toast 消息

Prevent duplicate Toast messages in Ionic

angular

typescript

ionic2

ionic3

ionic5

代码

已编辑

离子 2/3

离子 4/5