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

Question

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

到目前为止，我有一个指令检查父组件 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，然后初始化 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

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

Angular directive to check if all images have been fully loaded

javascript

typescript

angular-directive

angular