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来绑定数据。