我有一个 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 个字符的密码,提交两次)。
最佳答案
我建议处理所有 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();
}
}
关于ionic-framework - 在 Ionic 应用程序中处理 toast 通知的正确方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45588290/