Блог

У меня есть родительский элемент, который содержит выход маршрутизатора, который вызывает внутри него еще 4 дочерних компонента. Все компоненты содержат теги изображений внутри них. Есть ли какой-либо способ показать индикатор загрузки из родительского компонента, пока все ресурсы в родительском компоненте и дочернем компоненте не будут полностью загружены.

Я пробовал этот подход в ngAfterViewInit, но он работает не так, как ожидалось, сначала он показывает загрузчик, затем скрывает его, а фоновое изображение в родительском компоненте загружается шаг за шагом. Аналогично, когда мы просматриваем большое изображение в Google. Я хочу скрыть загрузчик, когда изображения будут полностью загружены.

Родительский компонент HTML

 <ng-container *ngIf="isLoading == true">
    <img src="./assets/images/loading.gif" alt="" width="20" height="20" />
</ng-container>
<ng-container *ngIf="isLoading == false">
    <section class="landing-page-outer">
       <div class="container">
          <div class="landing-page-inner">
             <div class="landing-page-bg">
                <img src="./assets/images/landing-bg.png" alt="" width="1920" height="1080" />
             </div>
             <div class="landing-content">
                <router-outlet></router-outlet>
             </div>
          </div>
       </div>
    </section>
</ng-container>
  

Родительский компонент TS

 public isLoading : boolean = true;

ngAfterViewInit() {
    this.isLoading = false;   
}
  

Дочерний компонент HTML

 <div class="landing-child-block">
   <div class="landing-child-heading">
     <h3>heading</h3>
   </div>
   <div class="landing-child-image">
      <img src="./assets/images/landing-child-image.jpeg" alt="" width="200" height="200" />
   </div>
</div>
  

вы можете использовать load атрибут и выполнять свою логику поверх этого.

 <img [src]="source" (load)="doAnything()">