Question

我有一个应用程序，应该能够显示pdf文档的突出显示部分。该应用程序将从每个pdf文件中提供一定的文本行。我希望能够输入此文本行并突出显示pdf文档的这一特定部分。我目前正在使用ng2-pdf-viewer。

我对角度和所有组件之间的交互方式还很陌生，因此我并没有真正了解如何将我的search（）函数波纹管连接到实际的pdf查看器。现在，我收到一条错误消息，说

ERROR TypeError：无法读取未定义的属性'pdfFindController'

因为我还没有真正将pdf查看器连接到search（）函数。

在我的ts文件中，我有以下代码（我刚刚包含了相关部分）

import {PdfViewerComponent} from 'ng2-pdf-viewer';

  pdfViewer: PdfViewerComponent;
  stringToSearch = 'hi';

  search() {
    this.pdfViewer.pdfFindController.executeCommand('find', {
      caseSensitive: false, findPrevious: undefined, highlightAll: true, 
phraseSearch: true, query: this.stringToSearch
    });
  }

我的html文件中有

<div *ngIf="showPreview" (click)="search()" class="search-result-preview- 
   darken">
  <div class="search-result-preview-container">
    <pdf-viewer
      [render-text]="true"
      style="display: block;"
      [src]="(staticUrl+'pdf/'+result.name)">
    </pdf-viewer>

  </div>
</div>

如何连接它们以使我的应用程序如上所述工作？

Answer 1

如Documentation中所述，您必须通过将PdfViewerComponent添加为@ViewChild将其链接到您的组件：

import {PdfViewerComponent} from 'ng2-pdf-viewer';

  @ViewChild(PdfViewerComponent, {static: false}) private pdfViewer: PdfViewerComponent;
  stringToSearch = 'hi';

  search() {
    this.pdfViewer.pdfFindController.executeCommand('find', {
      caseSensitive: false, findPrevious: undefined, highlightAll: true, phraseSearch: true, query: this.stringToSearch
    });
  }

使用ng2-pdf-viewer

1 个答案: