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

Question

我有一个 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();

这会导致 2 个 toast 重叠，一个将永久保留。这两个重叠不是问题，但一个无限期保留的事实是一个大问题。

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

解决这个问题的最佳方法是什么？我不想拥有 toast1 , toast2等，因为这不会解决问题，因为用户可能会两次启动相同的 toast 通知(<6 个字符的密码，提交两次)。

Answer 1

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

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