代码之家 › 专栏 › 技术社区 › Mike

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

toast ionic2 ionic-framework

Mike · 技术社区 · 8 年前

我有一个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 每次都是可变的。

toast1 , toast2 等等,因为这不会解决问题,因为用户可能会两次启动同一toast通知(6个字符的密码,提交两次)。

2 回复 | 直到 8 年前

robbannn 8 年前

我建议处理所有 Toast 服务中的交互。并将其注入您需要的任何组件/页面/服务中。在服务中,您保留对单个然后打电话 dismiss() 在展示之前。此解决方案将使您一次不致于出席多个祝酒词。

Toast服务:

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

Jakegarbo 8 年前

当你需要祝酒的时候。作为一个函数调用。然后,如果再次调用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)

    }