当组件加载角度2时的加载器gif

Question

我正在使用ng2-pdf-viewer来显示pdf。现在当pdf加载空白页面时出现。我想在pdf加载时添加一个加载程序gif，并在加载完成后隐藏它。任何帮助表示赞赏。

Answer 1

ng2-pdf-viewer提供了一个事件after-load-completed，可用于隐藏gif。并且，另一个名为on-progress的事件可用于设置布尔值true，然后在* ngIf中使用它，如下所示：

<pdf-viewer 
  [src]="pdfSrc" [render-text]="true" (on-progress)="showGif($event)">
</pdf-viewer>

<img src="loading.gif" *ngIf="loading"/>

在您的组件类中，执行以下操作：

(...)
public loading = false;
(...)

showGif(event: {loaded: number, total: number}) {
 this.loading = event.loaded < event.total;
}

Answer 2

输入类似loading = true。在您尝试加载pdf的地方形成方法

<pdf-viewer class="pdf-viewer" [src]="pdfSrc" (page-rendered)="pageRendered($event)" style="display: block;">

加载pdf后，将调用

page-rendered方法。因此，在其中设置loading = false。

pageRendered(e: CustomEvent) {
    this.loading = false;
    //console.log('(page-rendered)', e);
  }

ngx-loading组件将帮助您显示正在加载的魔方。

<ngx-loading [show]="loading" [config]="{fullScreenBackdrop: true}"></ngx-loading>

希望这会有所帮助。

Answer 3

使用pace.js.无需配置：）