如何显示加载器，直到 iframe 内容以 angular 7 完全加载

Question

我正在从 api 获取 iframe URL，我需要在 angular 7 应用程序的 HTML 中从 api 加载 iframe URL。在我得到 url 之前，我向用户展示了一个加载器。到目前为止，这一切都很好。但在那之后，当 iframe 内容加载到 dom 时，需要几秒钟。那一刻我的页面是空白的。我也想在这个间隙展示一个装载机。

如何实现？

urlToOpen: any;

ionViewDidLoad() {
   this.dataProcess();
}

dataProcess() {
  this.canShowLoader = true;
 // @ts-ignore
 this.pusher.getEngageMdData().take(1).timeout(60 * 1000).subscribe(
   data => {
     this.canShowLoader = false;
     this.urlToOpen =  this.sanitizer.bypassSecurityTrustResourceUrl(data.data);
  },
    (error) => {
      // console.log('error occurred', error);
      this.canShowLoader = false;
    },
   () => {
     // console.log('done');
     this.canShowLoader = false;
   }
 );
}


<iframe *ngIf="canShowLoader === false" [src]="urlToOpen" data-tap-disabled="true"></iframe>

<div class="loadingDiv" *ngIf="canShowLoader === true">
 <div class="loading_bg d-flex h-100">
   <div style="width: 70rem !important;" class="loader justify-content-center align-self-center"><div>
      <span style="color: white; font-size: 1.9rem">{{loadingMsg}}</span>
      <ion-spinner color="white"></ion-spinner>
    </div>
  </div>
</div>

Answer 1

你应该使用一个load事件。一旦 iframe 加载，它就会发出。所以你应该显示微调器直到它被发射。它看起来像它。 d-none 是设置 display:none 的类

<app-spinner *ngIf="isLoading"></app-spinner>
<iframe (load)="isLoading=false" [class.d-none]="isLoading"></iframe>