时间戳

首页 > 解决方案 > Angular 2 预览匹配的搜索查询片段，显示更多切换

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

问题描述

我目前在这里实现了一个简单的搜索功能，允许您搜索课程。目前，用户可以使用阅读更多组件查看描述和关键字的预览。我想添加额外的功能，用户可以看到描述的上下文或他们的查询匹配的关键字。例如，如果用户查询probability，在描述和关键字中都会有一个匹配，89A Statistics我希望用户看到x匹配前的第一个字符的片段 + 匹配 + 下一个x不超过的字符字符串的长度。

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

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

感谢您的帮助！

标签： angularangular2-template

解决方案

您也可以简单地添加它@Input()：

app.component.html

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

推荐阅读