Ionic2 为Toast加上图片

ionic2中为ToastController加上提示图片，方法如下：
第一步：修改node_modules\ionic-angular\components\toast\toast-component.js
找到'<div class="toast-message" id="{{hdrId}}" *ngIf="d.message">{{d.message}}</div> '
修改为'<div class="toast-message" id="{{hdrId}}" *ngIf="d.message" [innerHTML]="d.message"></div> '
第二步：将要插入的html代码标记为可信任的html代码

let tempUrl = '<div>![](assets/images/toast/tip.png)请输入账号</div>';

this.sanitize.bypassSecurityTrustHtml(tempUrl)

具体使用方法请点击此处
第三步：将信任的html代码作为message传入toast中

this.util.showToast(this.sanitize.bypassSecurityTrustHtml(tempUrl), 'top', 2000, 'toastMessage', false, '', true);

---UtilService---
showToast(message,position,duration,cssClass,showCloseButton,closeButtonText,dismissOnPageChange) {
    this.toast = this.toastCtrl.create({
       message:message,
       duration:duration,
       position:position,
       cssClass:cssClass,
       showCloseButton:showCloseButton,
       closeButtonText:closeButtonText,
       dismissOnPageChange:dismissOnPageChange
    })
    this.toast.present();
  }

这里我新建了一个utilservice对toast进行了封装，并在里面加了toastMessage这个cssClass.

这里写图片描述