Angular指令，检查是否所有图像都已完全加载

Question

所以我在Angular应用程序中有一个图库幻灯片部分，我正在将Swiperjs用于所有滑动内容。无论如何，为了使Swiperjs正常工作，我需要在初始化Swiperjs之前加载所有图像。因此，我的问题是，如何创建一个指令来查找组件及其子组件中的所有图像并检查是否已加载所有图像？

到目前为止，我有一条指令会检查父组件GalleryComponent中的所有Image标签，并记录“已加载图像”。下面是我的指令：

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的话，然后初始化Swiperjs？感谢任何输入。

Answer 1

您可以使用EventEmitter通知订户图像已加载。然后，只需将所有Observables至forkJoin合并到根组件中即可。加载完所有图像后，您将在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');
  });
}

Ng-run Example