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來綁定數據。