angular2+ 关键字亮显

简述

开发中经常遇到这样的问题，譬如当你在搜索框中输入一个关键字，你希望在搜索结果详情列表中用不同的颜色把这些关键字区分出来，这种需求用原生js或ng1实现的方法均能在网上搜到很多，不过ng2+在实现此需求方面并不多见，下面就把我最近用ng2+实现的方法罗列如下。

方案

步骤一：首先创建所需要求的管道（pipe）

• 用ng g pipe my-new-pipe命令创建一个管道（管道文件最好放在项目共享文件夹处）。

  
  
  

  文件结构

• 在此管道所在模块中导入此管道，一定记得写在declarations中

  
  
  

  模块中导入位置

• 管道文件（highlight.pipe.ts）中的内容如下：

  
  
  

  管道代码
  
  

  注意：DomSanitizer，这个的目的是数据在页面上的绑定能够安全的解析。

步骤二：在需要用此pipe的组件中使用

• 要用innerHTML来绑定数据，而不是{{}}，如下图：（highlight指pipe名，inputValue指关键字）

  
  
  

  组件中使用
  
  

  注意：在此组件的.ts文件中不需要任何导入此pipe的操作，即在此组件的.html中直接按上图使用即可。