Ionicアプリでトースト通知を適切に処理する方法

Question

さまざまな場所でトースト通知を受け取るIonic 2アプリがあります。

この例の良い例は、ユーザーがアプリでプロフィールを更新し、いくつかの妥当性チェックを行うところです。ユーザーが何らかの検証に失敗した場合は、次のように呼び出すことがあります。

 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つの乾杯を引き起こし、1は永久に残ります。 2つのオーバーラップは問題ではありませんが、無期限に残っている事実は大きな問題です。

毎回toastという変数を効果的に上書きしているからです。

これにはどのような方法が最適ですか？ toast1、toast2などは、ユーザーが同じトースト通知を2度起動する可能性があるため、問題を解決できないため、そのようなことは望ましくありません（< 6文字のパスワード、2回送信）。

Answer 1

サービスですべてのToastの対話を処理することをお勧めします。そして、それを必要とするコンポーネント/ページ/サービスに挿入してください。サービスでは、Toastという単一の参照を保持し、それを提示する前にdismiss()と呼んでください。 このソリューションは、一度に複数のトーストを提示することを防ぎます。

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

このようにすることができます。

トーストを表示する必要がある場合。関数として呼び出します。機能内に があります。あなたは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) 

    }