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><img src="assets/images/toast/tip.png" style="width:2.5rem;height:2.5rem;vertical-align:middle;margin-top:-5px;" alt="">请输入账号</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.