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. 效果
成功提示消息：
失败提示：