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

【问题标题】：Loader gif when component loads angular 2组件加载角度 2 时的加载程序 gif
【发布时间】：2017-10-21 11:59:20
【问题描述】：

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

【问题讨论】：

【解决方案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;
}

【讨论】：

感谢您的回答！它工作正常！但一个小问题是它调用 showGif 两次。虽然它根本没有调用 hideGif。由于显示后加载程序没有隐藏。
嗯。好吧，某种调整： D. 我认为当 after-load-complete 完成时，将最后设置 loading 属性 - 在这种情况下，设置为 false。也许，在 after-load-completed 被触发之后，on-progress 再运行一次。
但从未调用过加载完成后。我通过console.log确认了
尝试把$event作为showGif的参数。我会更新这个答案。请稍等！ :)
on-progress 事件提供具有 loaded 和 total 属性的对象。也许知道所有东西都已加载很有用，然后将 loading 设置为 false。

【解决方案2】：

把像loading=true。形成您尝试加载pdf的方法

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

页面渲染方法将在加载 pdf 后调用。所以在里面设置 loading=false。

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

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

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

希望这会有所帮助。

【讨论】：

【解决方案3】：

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

【讨论】：