正确的方式来处理离子应用
Toast通知我有一个离子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个字符的密码,但它不验证的另一个原因是,让另一吐司通知升高:
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个字符的密码,提交两次)。
我建议处理的服务的所有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();
}
}
我必须说,我不确定这是否是一种好方法,因为提供者并不是用来直接与最终用户(或用户界面)交互的。更好的方法是使用该代码创建一个'BaseComponent',并用它扩展页面。或者,如果您仅在单个页面中使用托播,请将此代码添加到该页面中。 – sebaferreras
我同意@sebaferreras。在这种情况下,扩展'class'和'component'是否有区别?我昨天做了一个编辑(见编辑历史),我在那里扩展了一个'class'。我使用了'class',因为只需要功能并且不需要模板。 – robbannn
主要区别在于_components_也有元数据(装饰器),甚至是强悍的元数据,在这个例子中它并不重要,它可能在构建生产时会导致一些错误(它只发生在某些版本的Ionic中),所以你可以添加一个_empty装饰者_来避免这种情况。请看看[这个SO回答](https://*.com/questions/43029212/typescript-and-multiple-classes/43030491#43030491),我创建一个'BaseComponent'来处理显示/创建吐司:) – sebaferreras
你可以这样做。
当你需要显示敬酒。作为函数调用。 里面的函数。你有一个计时器3秒钟。 然后如果吐司功能再次召回。您需要清除计时器,然后 重新设置。像这样的代码。
//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)
}
UPDATE
,或者你也可以把一个字符串参数是这样的。以避免许多吐司代码。
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)
}
如何创建你的面包?我同时创建了多个敬酒,所有工作都如预期的那样。 – Duannx
只有很多'let toast = this.toastCtrl.create({...}); toast.present();'。我只在实验室进行了测试('ionic serve --lab'),但假设它在设备上是一样的。 – Mike
请检查[本答案](https://*.com/questions/45074161/prevent-duplicate-toast-messages-in-ionic2/45074283#45074283)。通过对所有的吐司使用相同的属性,每次只能显示一个吐司(因为如果它们是验证消息,将吐司重叠在一起没有意义)。 – sebaferreras