Как показать загрузчик, пока содержимое iframe полностью не загрузится в angular 7 - PullRequest
0 голосов
/ 19 октября 2019

Я получаю URL-адрес iframe от api, и мне нужно загрузить URL-адрес iframe из api в мой HTML-код в приложении angular 7. Пока я не получу 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>

1 Ответ

0 голосов
/ 22 октября 2019

Вы должны использовать событие load. Он будет излучаться после загрузки iframe. Таким образом, вы должны отображать счетчик, пока он не будет выпущен. Это будет выглядеть примерно так. d-none - это класс, который устанавливает отображение: нет

<app-spinner *ngIf="isLoading"></app-spinner>
<iframe (load)="isLoading=false" [class.d-none]="isLoading"></iframe>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...