如何在从 URL 加载数据 (pdf) 到 HTML 对象元素时显示微调器或进度

Question

我正在以角度/HTML在对象元素中加载PDF，我想在加载数据时显示Spinner或Loader或Progressfor Object element

。

<object  [attr.data]="protectedUrl" type="application/pdf" style="width: 100%; height: 400px;"></object>

Answer 1

将其包装成一个，然后创建 isLoaded var，在从 url 获取数据后，这将是真的。

getPdfDataFromUrl(clientId){
setTimeout(() => {
            this.isLoaded=true;
        }, 3000);
let protectedUrl = this.sanitizer.bypassSecurityTrustResourceUrl('xxxxxx'+clientId);
}

<ng-container *ngIf="isLoaded">
<object  [attr.data]="protectedUrl" type="application/pdf" style="width: 100%; height: 400px;"></object>
<ng-container>

这将仅在 pdf 可用时显示您的对象。

Answer 2

你可以使用ngx-spinner库，它非常容易使用。一些有用的链接使用和堆栈闪电战示例。如果需要任何其他帮助，请发表评论。