Une bonne façon de gérer les notifications toast dans l'application Ionique

Question

J'ai une application Ionic 2 qui a des notifications de grillage à divers endroits. Un bon exemple de ceci est où l'utilisateur met à jour son profil sur l'application et j'effectue quelques contrôles de validation. Si l'utilisateur échoue une validation que je pourrais appeler les éléments suivants:

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

Pas de problème là-bas. Il affiche juste pendant 3 secondes puis disparaît.

Le problème vient lorsque plusieurs sont affichés à la fois. Par exemple, l'utilisateur peut saisir un mot de passe 6 caractères, mais il ne valide pas pour une autre raison, donc une autre notification de pain grillé est soulevé:

let toast = this.toastCtrl.create({ 
     message: 'Sorry, your passwords do not match. Your account was not updated.', 
     duration: 3000, 
     position: 'top' 
    }); 
    toast.present(); 

Cela provoque 2 pains grillés à se chevaucher et on restera en permanence. Les deux chevauchements ne sont pas un problème, mais le fait qu'on reste indéfiniment est un énorme problème.

J'imagine que c'est parce que je écrase effectivement la variable toast à chaque fois.

Quelle est la meilleure façon d'aborder cela? Je ne veux pas avoir toast1, toast2, etc, car cela ne résoudra pas le problème car l'utilisateur pourrait lancer la même notification de toast deux fois (< mot de passe de 6 caractères, soumettre deux fois).

Answer 1

Je suggère de gérer toutes les interactions Toast dans un service. Et injectez-le dans n'importe quel composant/page/service dont vous avez besoin. Dans le service, vous gardez une référence à un Toast et appelez le dismiss() avant de le présenter. Cette solution vous évitera d'avoir plus d'un Toast présenté à la fois.

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

Answer 2

vous pouvez le faire comme ça.

lorsque vous avez besoin de montrer un toast. appeler en tant que fonction. à l'intérieur de la fonction. vous avez une minuterie pour 3 secondes. puis si la fonction toast est à nouveau rappelée. vous devez effacer la minuterie puis réinitialiser à nouveau. comme ce code.

//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) 

} 

MISE À JOUR

ou vous pouvez aussi mettre un argument de chaîne comme celui-ci. pour éviter beaucoup de code 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) 

    }