组件加载角度时的加载程序gif 2

Question

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

Answer 1

使用pace.js。无需配置:)

Answer 2

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 = loaded < number; 
}