首页 > 代码库 > 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实现搜索结果中的搜索关键字高亮