Angular6實現搜尋關鍵字詞高亮
阿新 • • 發佈:2019-01-01
效果圖如下:
1、建立一個pipe
2、寫pipe(可以完全複製)
import {Injectable, Pipe, PipeTransform} from '@angular/core'; import {DomSanitizer} from '@angular/platform-browser'; @Pipe({ name: 'keyword' }) @Injectable() export class SearchkeywordPipe 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, `<a style="color: #ff2424;">${keyword}</a>`); console.log(res); return this.sanitizer.bypassSecurityTrustHtml(res); } } }
注意:DomSanitizer,這個的目的是是資料在頁面上的繫結能夠safe的解析
2.在頁面中使用
<li *ngFor="let blog of searchblogs"><i><a href="/blogconent/1"><img src="../../../../../../assets/images/1.jpg"></a></i> <h3><a href="/" [innerHTML]="blog.article_title | keyword:keyword"></a></h3> <p [innerHTML]="blog.article_content | keyword:keyword"></p> <div class="info-box d-flex align-content-center"> <p> <span class="date" [innerHTML]="blog.article_time | keyword:keyword"></span> </p> <p> <span class="read-num">閱讀數:{{blog.read_number}}</span> </p> <p> <span class="read-num">評論數:{{blog.comment_number}}</span> </p> </div> </li>
注意:這裡要用innerHTML來繫結資料。