首页 > 代码库 > angular2 pipe实现搜索结果中的搜索关键字高亮
angular2 pipe实现搜索结果中的搜索关键字高亮
效果图如下
1、声明一个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 {
let Reg=new RegExp(keyword,"i");
if(val){
let res = val.replace( Reg,`<span style="color: #ff2424;">${keyword}</span>`);
console.log(res)
return this.sanitizer.bypassSecurityTrustHtml(res);
}
}
}
注意:DomSanitizer,这个的目的是是数据在页面上的绑定能够safe的解析
2.在页面中使用
<ion-item class="list-data" *ngFor="let item of bonds?.result"
(click)="productUtils.showDetail(item.internal_code,‘bond‘,item.is_pi_only)">
<span class="company-name" [innerHTML]="item.name | keyword:keyword"></span><span class="code" [innerHTML]="item.internal_code | keyword:keyword"></span>
</ion-item>
在<ion-item>标签里面用新的标签包起来,不然会有样式问题; 要用innerHTML来绑定数据。
angular2 pipe实现搜索结果中的搜索关键字高亮
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。