Question

我目前有一个here实现的简单搜索功能，该功能允许用户搜索课程。当前，仅使用突出显示管道突出显示来自用户输入的实时searchText：

<td> <div [innerHTML]= "course.course_title | highlight : searchText"></div> 
<td>  
 <read-more [text]="course?.description | highlight : searchText" [maxLength]="75"> </read-more>
 </td>
  <td>  
    <read-more [text]="course?.keywords | highlight : searchText" [maxLength]="50"> </read-more>
 </td>

突出显示使用以下正则表达式：

transform(value: string, args: string): any {

if (args && value){
   var re_noSpace = /\s*,\s*/;
   var queryList = args.split(re_noSpace).filter(String);
   var re_matchQueries = new RegExp(queryList.join('|'),"gi");
   //e.g. if args was linear,equa, the regExpr will become  /linear|equa/gi
   return value.replace(re_matchQueries,(x)=>"<mark>"+x+"</mark>");
}

用户可以使用逗号（linear algebra, data science）或通过按钮添加课程来过滤课程。当用户通过按钮将过滤器添加到searchTerms数组时，我想突出显示两个两者当前的searchText以及所有以前的搜索词。

测试用例：如果用户通过按钮添加linear algebra和data science作为过滤器，则在用户键入时仍应实时突出显示实时内容，此外还应突出显示以前的所有术语，以便用户可以看到以前的字词在哪里匹配。

我的想法是通过在正则表达式（includePreviousTerms）中包含以前的搜索字词来调整突出显示管道：

transform(value: string, args: string): any {

if (args && value){
   var re_noSpace = /\s*,\s*/;
   var queryList = args.split(re_noSpace).filter(String);

   var includePreviousTerms = queryList.concat(this.searchTerms); 

   var re_matchQueries = new RegExp(includePreviousTerms.join('|'),"gi");
   return value.replace(re_matchQueries,(x)=>"<mark>"+x+"</mark>");
}

但是，由于无法导入，因此我不确定如何从管道访问this.searchTerms。我可以通过从视图传递数组来访问该数组：

 <td> <div [innerHTML]= "course.course_title | highlight : searchTerms"></div> 
 <td>  
     <div [innerHTML]="course.description | highlight : searchTerms">  </div>
</td>

但是，那时我将不再获得实时突出显示。我如何实现这种方法，或者有什么更好的方法来协调两者？

谢谢！

Answer 1

您可以在管道中添加一个额外的参数，如下所示：

transform(value: string, args: string, terms: string): any {

并通过模板将其传递，如下所示：

<read-more [text]="course?.keywords | highlight : searchText : searchTerms" [maxLength]="50"> </read-more>

这使我们既可以传递searchText也可以传递额外的值

在这里，我创建了一个名为test的附加参数，我传入了searchTerms

自定义管道中的角度访问组件属性

1 个答案: