Angular6实现搜索关键字词高亮
效果图如下:
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来绑定数据。