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><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.
这里写图片描述

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值