1. 说明
toastController是ionic官方提供的消息提示框组件，用于给用户操作后结果反馈和提示。
官网地址：如下是默认的样式，项目中使用则需要去改变很多样式则需要讲解一些入参。
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.效果
成功提示消息：
失败提示：
