Angular директива, чтобы проверить, все ли изображения были полностью загружены

Question

Итак, в моем приложении Angular есть секция слайдов галереи, и я использую Swiper js для всего этого. В любом случае, чтобы Swiper js работал правильно, мне нужно, чтобы все изображения были загружены до инициализации Swiper js. Отсюда мой вопрос, как я могу создать директиву, которая будет искать все изображения в компоненте и его дочернем компоненте и проверять, все ли изображения загружены?

Пока что у меня есть директива, которая проверяет все теги изображений в родительском компоненте GalleryComponent и журналы «Img Loaded». Ниже моя директива:

import { Directive,ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: 'img'
})
export class ImagesLoadedDirective {
  constructor(public elementRef:ElementRef) { }

  @HostListener("load") imageLoaded() {
    console.log("img loaded");
    /* Can I do something like "return true" for every image that loaded? And how would I register that in my Gallery Component*/
  }
}

Я включил директиву в свой GalleryComponent как таковой:

  @ViewChildren(ImagesLoadedDirective) images:QueryList<ImagesLoadedDirective>;

Я полагаю, что следующим шагом будет как-то сохранить каждое загруженное изображение, и как только это будет сделано
я могу сказать что-то вроде this.allImagesLoaded = true, а затем инициализировать Swiper js? Оценил любой ввод.

Answer 1

Вы можете использовать EventEmitter, чтобы уведомить подписчиков, что изображение загружено. Затем просто объедините все эти от Observables до forkJoin в свой root компонент. После загрузки всех изображений вы получите уведомление о подписке forkJoin.

directive.ts

@Directive({
  selector: 'img',
})
export class ImgLoadedDirective {
  @Output() loaded = new EventEmitter();

  @HostListener('load')
  @HostListener('error')
  imageLoaded() {
    this.loaded.emit();
    this.loaded.complete();
  }
} 

parent.ts

@ViewChildren(ImgLoadedDirective) images: QueryList<ImgLoadedDirective>;

ngAfterViewInit() {
  forkJoin(this.images.map(imgDir => imgDir.loaded)).subscribe(() => {
    console.log('all images have been loaded');
  });
}

Пример расхода на газ