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中聲明服務,那個頁面需要使用,引用即可。