Angular 2 预览匹配的搜索查询片段，显示更多切换

Question

我目前实现了一个简单的搜索功能 here that allows you to search for courses. Currently the user can see a preview of the description and the keywords using a 。我想添加额外的功能，用户可以看到他们的查询匹配的描述或关键字的上下文。例如，如果用户查询 probability，89A Statistics 的描述和关键字都会匹配，我希望用户看到前 x 个字符的片段匹配前 + 匹配 + 下 x 个不超过字符串长度的字符。

我对Angular比较陌生，是否可以从read-more组件的主组件访问绑定到ngModel的搜索查询？这样我就可以将 this.currentText 定义为相关片段并让 toggleView 显示整个文本。

if (this.isCollapsed == true) {
      this.currentText = this.text.substring(0, this.maxLength) + "...";

感谢您的帮助！

Answer 1

您也可以简单地将其添加为 @Input()：

app.component.html

<read-more 
     [text]="course?.description | highlight : searchText" 
     [maxLength]="100"
     [query]="searchText"> </read-more>

Angular 2 预览匹配的搜索查询片段，显示更多切换

Angular 2 Preview Matched Snippet of Search Query with Show More Toggle

angular2-template

angular