1. description

toastController is an official message prompt box component provided by ionic, which is used to give feedback and prompt to users after operation.
Official website address: https://ionicframework.com/do...
The following is the default style. To use it in a project, you need to change many styles, and you need to explain some parameters.

2. use

• Console run command, create service

ionic g provicer ToastService

• Programming

import { Injectable } from '@angular/core';
/**
Import the ionic message prompt box module 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 {

//Three message box styles defined by ourselves
  errorCss='errorToast'
  generalCss='generalToast'
  successCss='successToast'

/**
Constructor introduction
*/
  constructor(public toast:ToastController) {
    console.log('Hello ToastServiceProvider Provider');
  }

  /**
   * Error message prompt box
   * @param message news
   */
  errorToast(message:any){
    this.presentToast(message,this.errorCss);
  }

  /**
   * General information prompt box
   * @param message news
   */
  generalToast(message:any){
    this.presentToast(message,this.generalCss);
  }

  /**
   * Success message prompt box
   * @param message
   */
  successToast(message:any){
    this.presentToast(message,this.successCss);
  }

  /**
   *
   * @param message Information to show
   * @param css Custom background color
   */
  presentToast(message:any,css:string) {
    let toast = this.toast.create({
      message: message,//Prompt message content
      duration: 3000,//Display time in milliseconds
      position: 'bottom',//Where the message box appears, bottom is the meaning of the bottom. Naturally, there are top and middle
      showCloseButton:true,//If there is a close button, true means there is
      cssClass:css,//The style defined for the message box, css style name
      closeButtonText:'Close'//Close text on button
    });

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

    toast.present();//Departure message prompt box
  }

}

• Corresponding css file

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

3. import

The service is declared in app.module.ts, which page needs to be used and can be referenced.

4. effect

Success message:

Failure prompt: