angular2 pipe实现搜索结果中的搜索关键字高亮-CSDN博客

效果图如下

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

转载于:https://www.cnblogs.com/shitoupi/p/6710341.html