正确的方式来处理离子应用

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个字符的密码，提交两次）。

来源

2017-08-09 Mike

如何创建你的面包？我同时创建了多个敬酒，所有工作都如预期的那样。 – Duannx

只有很多'let toast = this.toastCtrl.create（{...}）; toast.present（）;'。我只在实验室进行了测试（'ionic serve --lab'），但假设它在设备上是一样的。 – Mike

请检查[本答案]（https://stackoverflow.com/questions/45074161/prevent-duplicate-toast-messages-in-ionic2/45074283#45074283）。通过对所有的吐司使用相同的属性，每次只能显示一个吐司（因为如果它们是验证消息，将吐司重叠在一起没有意义）。 – sebaferreras

我建议处理的服务的所有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(); 
    } 
}

来源

2017-08-09 13:18:41 robbannn

我必须说，我不确定这是否是一种好方法，因为提供者并不是用来直接与最终用户（或用户界面）交互的。更好的方法是使用该代码创建一个'BaseComponent'，并用它扩展页面。或者，如果您仅在单个页面中使用托播，请将此代码添加到该页面中。 – sebaferreras

我同意@sebaferreras。在这种情况下，扩展'class'和'component'是否有区别？我昨天做了一个编辑（见编辑历史），我在那里扩展了一个'class'。我使用了'class'，因为只需要功能并且不需要模板。 – robbannn

主要区别在于_components_也有元数据（装饰器），甚至是强悍的元数据，在这个例子中它并不重要，它可能在构建生产时会导致一些错误（它只发生在某些版本的Ionic中），所以你可以添加一个_empty装饰者_来避免这种情况。请看看[这个SO回答]（https://stackoverflow.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) 

    }

来源

2017-08-09 10:49:44

正确的方式来处理离子应用

回答

相关问题