angular - 如何在 Angular 2 中使用自定义指令

Question

我遵循了有关创建自定义指令以延迟加载角度 8 图像的教程，如下所示：

import { AfterViewInit, Directive, ElementRef, HostBinding, Input } from '@angular/core';

@Directive({
  selector: 'img[appLazyLoad]'
})
export class LazyLoadDirective implements AfterViewInit {
  @HostBinding('attr.src') srcAttr = null;
  @Input() src: string;

  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    this.canLazyLoad() ? this.lazyLoadImage() : this.loadImage();
  }

  private canLazyLoad() {
    return window && 'IntersectionObserver' in window;
  }

  private lazyLoadImage() {
    const obs = new IntersectionObserver(entries => {
      entries.forEach(({ isIntersecting }) => {
        if (isIntersecting) {
          this.loadImage();
          obs.unobserve(this.el.nativeElement);
        }
      });
    });
    obs.observe(this.el.nativeElement);
  }

  private loadImage() {
    this.srcAttr = this.src;
  }
}

我有一个应该渲染多个图像的组件（我正在考虑为“src”创建一个数组），我想使用这个指令，这样图像就不会同时加载。在我获得此代码的教程中，它没有说明我如何使用它。你能告诉我如何使用它。谢谢！