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

Posted 2023-03-04

【中文标题】防止 Ionic 中出现重复的 Toast 消息

【英文标题】：Prevent duplicate Toast messages in Ionic

【发布时间】：2017-12-17 20:30:29

【问题描述】：

我在我的ionic2 项目中使用ToastController 实现了toast。目前我正面临重复的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();
   

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

已编辑

带有重复的 toast（以使用 toastr 为例，同样的情况适用于我）

当我启用“阻止通知”时，在超时时间内没有重复的 toast。

非常感谢任何帮助。

【问题讨论】：

***.com/questions/42133217/…的可能重复

可能是，但我的问题不同。我想防止重复。

@AnandRaj 。你能分享一下如何从文本框中为 toast 设置动态消息的代码吗？

@Raghav 请对此添加问题并分享网址

@AnandRaj 。你能分享你的代码以便我得到帮助吗？

【参考方案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();
  )      

【讨论】：

嗨，这不会防止重复吧？它检查 toastInstance ，如果它关闭当前的并再次创建它。我的目标是“即使多次点击同一个按钮，也只显示一次吐司”

哦，对了。我已经编辑了答案，这次如果显示 toast，它不会被隐藏，也不会创建新的 toast。

frm "toast" 来自哪里？吐司应该是 toastInstance 。我说的对吗？

我试过你的答案。 Toast 只会出现一次。但是当我在吐司超时后再次点击按钮时，它没有显示吐司

非常感谢。我明白了。

【参考方案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