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

Question

我有一个Ionic 2应用程序,在各个地方都有吐司通知.

一个很好的例子是用户在应用程序上更新他们的个人资料并运行一些验证检查.如果用户未通过某些验证,我可能会调用以下内容:

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

这导致2个吐司重叠,一个将永久保留.这两个重叠不是一个问题,但一个无限期的事实是一个巨大的问题.

我想这是因为我toast每次都有效地覆盖变量.

解决这个问题的最佳方法是什么？我不希望有toast1,toast2等等,因为这不会解决问题,因为用户可能会推出同样Toast通知两次(<6个字符的密码,提交两次).

Answer 1

我建议处理Toast服务中的所有交互.并将其注入您需要的任何组件/页面/服务中.在服务中,您可以保留对单个的引用Toast并dismiss()在呈现之前调用它.此解决方案将使您无法一次呈现多个Toast.

ToastService:

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