angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
更新时间：2018年08月17日 14:07:36 作者：全栈弄潮儿
这篇文章主要介绍了angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本篇angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例，分享给大家，具体如下：
添加一个pipe：
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来绑定数据。
演示效果
开源项目地址：https://github.com/alex-0407/ionic3-awesome
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要讲解AngularJS模块的相关知识，这里整理了详细的基础资料，并提供示例代码和示例实现效果图，有兴趣的小伙伴可以参考下2016-08-08
本文主要介绍 Ubuntu系统下Angularjs开发环境安装，这里详细介绍了安装步骤和注意事项，有在Ubuntu 环境下开发的朋友可以参考下2016-09-09
这篇文章主要介绍了AngularJS 仿微信图片手势缩放的实例的相关资料,希望大家通过本文实现这样的功能，需要的朋友可以参考下2017-09-09
今天小编就为大家分享一篇angular.js实现列表orderby排序的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了AngularJS 支付倒计时功能的实现思路,需要的朋友可以参考下2017-06-06
基于datepicker定义自己的angular时间组件的示例
这篇文章主要介绍了基于datepicker定义自己的angular时间组件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章主要给大家介绍了将angular-ui的分页组件封装成指令的方法，文中介绍的非常详细，相信会对大家的学习或者工作觉有一定的参考价值，需要的朋友下面来一起看看吧。2017-05-05
这篇文章主要介绍了浅谈Angular7 项目开发总结，本文在此做一次遇到问题的总结，以便知识的掌握，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
本文给大家介绍使用Angularjs实现多个页面共享数据的方式，通过定义一个共享服务service来实现此功能，对angularjs共享数据相关知识感兴趣的朋友一起学习2016-03-03
这篇文章主要为大家详细介绍了AngularJs分页插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-06-06
最新评论