信使根据用户给出的输入显示搜索结果。在显示结果时需要突出显示搜索到的单词。
这些是所使用的 html 和组件。
组件.html
<div *ngFor = "let result of resultArray">
<div>Id : result.id </div>
<div>Summary : result.summary </div>
<div> Link : result.link </div>
</div>
组件.ts
resultArray : any = [{"id":"1","summary":"These are the results for the searched text","link":"http://www.example.com"}]
该 resultArray 是通过发送搜索文本作为输入来访问后端服务来获取的。根据搜索文本获取结果。需要突出显示搜索到的文本,类似于google搜索。请找到截图,
如果我搜索“member”一词,则“member”一词的出现会突出显示。如何使用 Angular 2 实现相同的效果。请就此提出一个想法。
您可以通过创建一个管道并将该管道应用到summary数组内部的一部分ngfor
。这是代码Pipe
:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'highlight'
})
export class HighlightSearch implements PipeTransform {
transform(value: any, args: any): any {
if (!args) {return value;}
var re = new RegExp(args, 'gi'); //'gi' for case insensitive and can use 'g' if you want the search to be case sensitive.
return value.replace(re, "<mark>$&</mark>");
}
}
然后在标记中将其应用到字符串上,如下所示:
<div innerHTML="{{ str | highlight : 'search'}}"></div>
将“搜索”替换为您要突出显示的单词。
希望这会有所帮助。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)