简述
开发中经常遇到这样的问题,譬如当你在搜索框中输入一个关键字,你希望在搜索结果详情列表中用不同的颜色把这些关键字区分出来,这种需求用原生js或ng1实现的方法均能在网上搜到很多,不过ng2+在实现此需求方面并不多见,下面就把我最近用ng2+实现的方法罗列如下。
方案
步骤一:首先创建所需要求的管道(pipe)
-
用ng g pipe my-new-pipe命令创建一个管道(管道文件最好放在项目共享文件夹处)。
-
在此管道所在模块中导入此管道,一定记得写在declarations中
-
管道文件(highlight.pipe.ts)中的内容如下:
注意:DomSanitizer,这个的目的是数据在页面上的绑定能够安全的解析。
步骤二:在需要用此pipe的组件中使用
-
要用innerHTML来绑定数据,而不是{{}},如下图:(highlight指pipe名,inputValue指关键字)
注意:在此组件的.ts文件中不需要任何导入此pipe的操作,即在此组件的.html中直接按上图使用即可。