内容简介:注: DomSanitizer,这个的目的是是数据在页面上的绑定能够safe的解析注: 在标签里面用新的标签包起来,不然会有样式问题; 要用innerHTML来绑定数据。
import { Pipe, Injectable, PipeTransform } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Pipe({ name: 'keyword' }) @Injectable() export class KeywordPipe implements PipeTransform { constructor(private sanitizer: DomSanitizer) { } transform(val: string, keyword: string): any { const Reg = new RegExp(keyword, 'i'); if (val) { const res = val.replace(Reg, `<span style="color: #81E1B7;">${keyword}</span>`); console.log(res); return this.sanitizer.bypassSecurityTrustHtml(res); } } } 复制代码
注: DomSanitizer,这个的目的是是数据在页面上的绑定能够safe的解析
html中使用方法:
<ion-label [innerHTML]="item.name | keyword:searchText"></ion-label> 复制代码
注: 在标签里面用新的标签包起来,不然会有样式问题; 要用innerHTML来绑定数据。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 谷歌将在图像搜索中测试广告,但不覆盖搜索结果
- 搜索更高效,谷歌在搜索结果中直观呈现新闻机构的数据
- Lucene.Net如何实现搜索结果分类统计功能
- 打压竞争对手?Firefox 搜索结果受 Google 区别对待
- 夸克3.2版升级智能预测,搜索结果秒级极速呈现
- vue 实现搜索的结果页面支持全选与取消全选
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。