angular - 我需要实现搜索（如在页面中查找）。我在我的 HTML 页面中呈现了一个 XML。我需要在这个呈现的 XML 中搜索文本

Question

我需要实现搜索（如在页面中查找）。我在我的 HTML 页面中呈现了一个 XML。我需要在这个呈现的 XML 中搜索文本。我已将 XML 设置为 div 的 innerhtml。我使用 IgxTextHighlightDirective 来搜索和突出显示搜索文本。

这是我的数据

        this.htmlData = this.sanitizer.bypassSecurityTrustHtml(xmld);

这就是我在我的 HTML 模板中写的

<div class="xml-view" (dblclick)="selectEntryText($event)">
    <div [innerHTML]="htmlData" igxTextHighlight [value]="htmlData" class="search-text">
    </div>
</div>

在搜索框中输入后。这是我的问题。

Answer 1

看起来您还没有添加必要的样式。另外，您究竟使用什么innerHtml输入？正如我所见，您已经正确设置了value输入，并且只要您执行find等效的逻辑，搜索功能应该可以正常工作。

查看此示例和主题以获取有关如何使用文本高亮指令的更多信息

private find(increment: number) {
    if (this.searchText) {
        this.matchCount = this.highlight.highlight(this.searchText, this.caseSensitive);
        this.index += increment;

        this.index = this.index < 0 ? this.matchCount - 1 : this.index;
        this.index = this.index > this.matchCount - 1 ? 0 : this.index;

        if (this.matchCount) {
            IgxTextHighlightDirective.setActiveHighlight("group1", {
                index: this.index
            });
        }
    } else {
        this.highlight.clearHighlight();
    }
}