ionic3 toastController使用封裝

1. 說明

toastController是ionic官方提供的消息提示框組件，用於給用戶操做後結果反饋和提示。
官網地址：https://ionicframework.com/do...
以下是默認的樣式，項目中使用則須要去改變不少樣式則須要講解一些入參。

2. 使用

• 控制檯運行命令，建立服務

ionic g provicer ToastService

• 編寫程序

import { Injectable } from '@angular/core';
/**
導入ionic消息提示框模塊ToastController
*/
import { ToastController } from "ionic-angular";

/*
  Generated class for the ToastServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class ToastServiceProvider {

//本身定義的三種消息框樣式
  errorCss='errorToast'
  generalCss='generalToast'
  successCss='successToast'

/**
構造函數引入
*/
  constructor(public toast:ToastController) {
    console.log('Hello ToastServiceProvider Provider');
  }

  /**
   * 錯誤信息提示框
   * @param message 消息
   */
  errorToast(message:any){
    this.presentToast(message,this.errorCss);
  }

  /**
   * 普通訊息提示框
   * @param message 消息
   */
  generalToast(message:any){
    this.presentToast(message,this.generalCss);
  }

  /**
   * 成功信息提示框
   * @param message
   */
  successToast(message:any){
    this.presentToast(message,this.successCss);
  }

  /**
   *
   * @param message須要展現的信息
   * @param css 自定義的背景顏色
   */
  presentToast(message:any,css:string) {
    let toast = this.toast.create({
      message: message,//提示消息內容
      duration: 3000,//顯示時長，單位毫秒
      position: 'bottom',//消息框出現的位置，bottom就是底端的意思，天然就有top和中間了
      showCloseButton:true,//是否有關閉按鈕，true就是有
      cssClass:css,//本身給消息框定義的樣式，css樣式名稱
      closeButtonText:'關閉'//關閉按鈕上的文字
    });

    toast.onDidDismiss(() => {
      console.log('Dismissed toast');
    });

    toast.present();//出發消息提示框
  }

}

• 對應的css文件

.errorToast{
  //.toast-message{
  //  color: #a94442;
  //}
  .toast-wrapper {
    //background: #eba6ac;
    background: #f53d3d;
  }
}
.generalToast{
  .toast-wrapper {
    background: #488aff;
  }
}
.successToast{
  .toast-wrapper {
    background: #32db64;
  }
}

3. 導入

app.module.ts中聲明服務，那個頁面須要使用，引用便可。

4.效果

成功提示消息：

失敗提示：