添加一个 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 {
- const Reg = new RegExp(keyword, 'i');
- if (val) {
- const res = val.replace(Reg, `<span style="color: #81E1B7;">${keyword}</span>`);
- console.log(res);
- return this.sanitizer.bypassSecurityTrusthtml(res);
- }
- }
- }
复制代码
注: DomSanitizer, 这个的目的是是数据在页面上的绑定能够 safe 的解析
html 中使用方法:
<ion-label [innerHTML]="item.name | keyword:searchText"></ion-label>
复制代码
注: 在标签里面用新的标签包起来, 不然会有样式问题; 要用 innerHTML 来绑定数据.
演示效果
开源项目地址: https://github.com/alex-0407/ionic3-awesome
来源: https://juejin.im/post/5b73e50051882561446fb776