正確的方式來處理離子應用

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

正確的方式來處理離子應用

回答

相關問題