angular 2/ionic 2 검색 결과 의 검색 키워드 하 이 라 이 트 를 실현 하 는 예제

이 angular 2/ionic 2 는 검색 결과 의 검색 키워드 하 이 라 이 트 를 실현 하 는 예제 입 니 다.구체 적 으로 다음 과 같 습 니 다.
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
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.