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

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 数组添加过滤器时，我想突出显示 both 当前 searchText 以及所有以前的搜索词。

测试用例：如果用户通过按钮添加 linear algebra 和 data science 作为过滤器，则在用户键入时仍应进行实时突出显示，此外还会显示任何先前的术语突出显示，以便用户可以看到以前的术语匹配的地方。

我的想法是通过在正则表达式 (includePreviousTerms) 中包含之前的 searchTerms 来调整突出显示管道：

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

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

Angular access component property in custom pipe

angular

angular-template

angular-pipe

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

Angular access component property in custom pipe

angular

angular-template

angular-pipe

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