在 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

变量。

解决这个问题的最佳方法是什么？ 我不想有

toast1

、

toast2

等，因为这无法解决问题，因为用户可能会启动相同的 toast 通知两次 (<6 character password, submit twice).

Answer 1

我建议处理服务中的所有

Toast

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

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

Answer 2

你可以这样做。

当你需要敬酒时。作为函数调用。 函数内部。你有一个 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)

    }

Answer 3

就我而言，我只使用 Ionic 推荐的代码：

在我的文件中login.page.html

  <ion-toast
    [isOpen]="isToastOpen"
    message="{{toastMessage}}"
    [duration]="5000"
    (didDismiss)="setOpen(false)"
  ></ion-toast>

在我的login.component.ts

  isToastOpen = false;

  setOpen(isOpen: boolean) {
    this.isToastOpen = isOpen;
  }

Psdt：不要忘记在login.component.ts中导入独立组件：D