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是一个不错的用于开发SPA应用（单页Web应用）的框架。通过本文给大家介绍angularjs基础教程，需要的朋友要求学习吧2016-04-04
这篇文章主要给大家介绍了将angular-ui的分页组件封装成指令的方法，文中介绍的非常详细，相信会对大家的学习或者工作觉有一定的参考价值，需要的朋友下面来一起看看吧。2017-05-05
这篇文章主要为大家详细介绍了AngularJs分页插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-06-06
这篇文章主要为大家介绍了Angular应用Bootstrap过程步骤逻辑详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
DevUI 是一款面向企业中后台产品的开源前端解决方案，它倡导沉浸、灵活、至简的设计价值观，提倡设计者为真实的需求服务，为多数人的设计，拒绝哗众取宠、取悦眼球的设计。如果你正在开发 ToB 的工具类产品，DevUI 将是一个很不错的选择！2021-05-05
这篇文章主要介绍了深入理解Angular4订阅(Subscribe)与取消，详细的介绍了订阅与取消的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
这篇文章主要介绍了AngularJS中scope的绑定策略,结合实例形式简单分析了AngularJS scope的三种绑定模式的使用方法与相关注意事项,需要的朋友可以参考下2017-10-10
这篇文章主要介绍了angularjs自定义ng-model标签的属性的相关资料,需要的朋友可以参考下2016-01-01
本文的主要内容是介绍在AngularJS中怎样利用Controller实现URL跳转，本文给出了实例代码，简单明了，有需要的可以参考学习。2016-08-08
Renderer2 类是 Angular 提供的一个抽象服务,允许在不直接操作 DOM 的情况下操纵应用程序的元素,本文给大家介绍了如何在 Angular 中使用 Renderer2,文中通过代码示例给大家讲解的非常详细,需要的朋友可以参考下2024-03-03
最新评论