Ionic framework 在Ionic应用程序中处理toast通知的正确方法

我有一个Ionic 2应用程序，在不同的地方有toast通知

一个很好的例子是，用户在应用程序上更新他们的个人资料，我运行一些验证检查。如果用户未能通过某些验证，我可能会调用以下命令：

      let toast = this.toastCtrl.create({
        message: 'Sorry, your password must be at least 6 characters long.  Your account was not updated.',
        duration: 3000,
        position: 'top'
      });
      toast.present();

没问题。它只显示3秒钟，然后消失

当一次显示多个时，问题就出现了。例如，用户可能会键入一个6个字符的密码，但由于其他原因，该密码无法验证，因此会引发另一个toast通知：

    let toast = this.toastCtrl.create({
      message: 'Sorry, your passwords do not match.  Your account was not updated.',
      duration: 3000,
      position: 'top'
    });
    toast.present();

这将导致两个烤面包重叠，一个将永久保留。这两个重叠不是问题，但其中一个无限期地存在是一个巨大的问题

我想这是因为我每次都在有效地覆盖

toast

变量

---

最好的方法是什么？我不想让

toast 1

，

toast 2

等等，因为这不会解决问题，因为用户可能会启动同一个toast通知两次（您可以这样做

当你需要祝酒时。作为函数调用。 在函数内部。你有一个3秒钟的计时器。 然后，如果再次调用toast函数，则需要清除计时器 重新设置它。就像这个代码一样

//delacare timer
_timer:any = null;

showToast(){
    let toast:any;
    //check if timer is running ,if its clear out and dismiss existing toast  
    if (this._timer) { 
         toast.dismiss()
         clearTimeout(this._timer)
    };

    this._timer = setTimeout(() => {
       toast = this.toastCtrl.create({
        message: 'Sorry, your passwords do not match.  Your account was not updated.', 
       position: 'top'
    });
    toast.present();
    },3000)

}

更新

或者您也可以像这样放置一个字符串参数。以避免许多toast代码

showToast(string_message){
        let toast:any;
        //check if timer is running it its . clear out  
        if (this._timer) { 
             toast.dismiss()
             clearTimeout(this._timer)
        };

        this._timer = setTimeout(() => {
           toast = this.toastCtrl.create({
            message: string_message, 
           position: 'top'
        });
        toast.present();
        },3000)

    }

---

我建议在一个服务中处理所有的

Toast

交互。并将其注入到您需要的任何组件/页面/服务中。在该服务中，您保留对单个

Toast

的引用，并在呈现它之前调用

dismise（）

。 此解决方案将使您一次不致有多个祝酒词

烤面包服务：

import { Injectable } from '@angular/core';
import { ToastController, Toast } from 'ionic-angular';

@Injectable()
export class ToastService{
    toast: Toast = null;

    constructor(private toastCtrl: ToastController){ }

    presentToast(text:string):void{
        let toastData = {
            message: text,
            duration: 3000,
            position: 'top'
        }

        this.showToast(toastData);
    }

    presentClosableToast(text:string):void{
        let toastData = {
            message: text,
            showCloseButton: true,
            closeButtonText: 'X',
            position: 'top' 
        };

        this.showToast(toastData);
    }

    private showToast(data:any):void{
        this.toast ? this.toast.dismiss() : false;
        this.toast = this.toastCtrl.create(data);
        this.toast.present();
    }
}

---

如何创建您的toast？我同时创建了多个toast，所有的工作都如期进行。只有大量的

let toast=this.toastCtrl.create（{…}）；toast.present（）；

。我只在实验室进行了测试（

ionic serve--lab

），但假设在设备上是相同的。请检查。通过对所有toast使用相同的属性，每次只能显示一个toast（因为如果toast是验证消息，则重叠toast没有意义）@sebaferreras:你知道如何重现这个问题吗？我尝试了很多方法，但都无法面对。LOLI必须说，我不确定这是否是一个好方法，因为提供者并不意味着用来与最终用户（或UI）交互直接。更好的方法是用该代码创建一个

BaseComponent

，并用它扩展你的页面。或者如果你只在一个页面中使用祝酒词，那么将此代码添加到该页面。我同意@sebafereras。在这种情况下，扩展

类

和

组件

之间有区别吗？我做了一个edi昨天（参见编辑历史记录），我在这里扩展了一个

类

。我使用了一个

类

，因为只需要功能，不需要模板。主要区别在于组件也有元数据（装饰器），甚至是硬元数据。在本例中，这并不重要，在为生产构建时可能会导致一些错误（这只发生在某些版本的Ionic中），因此您可以添加一个空的装饰器来避免这种情况。请看一下我在哪里创建了一个

BaseComponent

来处理显示/创建祝酒词：）