トーストは短いメッセージで、通常は画面の下部近くに短時間表示されます。 これらは主にモバイルアプリのクイック通知に使用されます。 Ionic 2を使用すると、アプリにトーストを簡単に実装できます。

import { ToastController } from 'ionic-angular';

次に、コンポーネントのクラスコンストラクターにToastControllerを挿入します。

constructor(public toastCtrl: ToastController) {}

次に、 favoriteRecipe()メソッドで2秒間のトーストを作成して、レシピがお気に入りに追加されたことをユーザーに示します。

favoriteRecipe() {
  this.favorite = true;
  let toast = this.toastCtrl.create({
    message: `Added to your favorites!`,
    duration: 2000
  });
  toast.present();
}

トーストのpresent()メソッドはそれを表示します。 dismiss()は、トーストを閉じるために呼び出すこともできます。

トーストコントローラーオプション

メッセージ期間に加えて、トーストに設定できるオプションがいくつかあります。

  • position :トーストの配置を示す文字列。 top middle 、またはbottomのいずれかになります。 Bottomがデフォルトです。
  • cssClass :トーストに適用するクラスを含む文字列。
  • closeButtonText :デフォルトは「閉じる」です。
  • dismissOnPageChange :デフォルトはfalseです。
  • showCloseButton :デフォルトはfalseです。