从 angular 组件调用 ng2-pdf-viewer 的一个方法

Question

我是 angular 5 的新手。我正在使用 ng2-pdf-viewer。我需要从我的组件在该插件中调用它的方法之一 updateSize() 。谁能告诉我如何从组件访问它。

这里是插件的link

https://www.npmjs.com/package/ng2-pdf-viewer

Answer 1

您可以使用模板引用变量来访问 ng2-pdf-viewer

的 public 方法

像这样在 html 文件中添加一个名为 #pdfViewer 的模板变量

  <pdf-viewer
    #pdfViewer
    [src]="reportObject.src"
    [page]="reportObject.currentPage"
    [render-text]="true"
    >
  </pdf-viewer>

使用 ViewChild 装饰器在您的组件中引用它。

  import { PdfViewerComponent } from 'ng2-pdf-viewer';
  import {ViewChild} from '@angular/core';

  @ViewChild('pdfViewer') pdfComponent: PdfViewerComponent;

您现在可以像这样使用 pdfComponent 变量访问 ng2-pdf-viewer 的方法

  this.pdfComponent.updateSize();

Answer 2

您可能可以通过使用 ViewChild 来实现。

在你使用 pdf-viewer 的 html 模板中，将其写成这样 <pdf-viewer [src]="src"[original-size]="false" #pdfViewer></pdf-viewer>。
将 @ViewChild('pdfViewer') pdfViewer 添加到您的组件中。

之后，您应该可以使用像这样的方法 this.pdfViewer.updateSize() 以及 pdfViewer 中的方法。

从 angular 组件调用 ng2-pdf-viewer 的一个方法

Invoke a method of ng2-pdf-viewer from angular component

javascript

pdf-viewer

angular