角度2/离子C2实现搜索结果中的搜索关键字高亮的示例

本篇角度2/离子C2实现搜索结果中的搜索关键字高亮的示例，分享给大家，具体如下：

添加一个管道：

从“@棱角分明/核心”导入{管道，可注射，管道转换}；从" @angular/platform-browser "导入{ domHeaLTH }；@ Pipe({ name : ' keyword ' })@ injective()导出类关键字管道实现了管道转换{构造函数(private heather : dommer){ }转换(val :字符串，关键字：字符串): any { const Reg=new RegExp(关键字，‘我’)；if(val){ const RES=val。替换(Reg，` span style=' color : # 81e 1b 7 ' $ { keyword }/span `)；控制台。日志(RES)；返回这个。洗手液。bypasssecuritytrushtml(RES)；} }}注：DOM洗手液，这个的目的是是数据在页面上的绑定能够安全的的解析

超文本标记语言中使用方法：

离子标签[InnerHTML]='项。名称| KeyWord :搜索文本'/离子标签注：在标签里面用新的标签包起来，不然会有样式问题；要用innerHTML来绑定数据。

演示效果

开源项目地址：https://github。com/Alex-0407/ion C3-真棒

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。