在 ngAfterViewInit 中检索由 ngFor 创建的元素

Question

我正在我的 Angular (5) 应用程序中实现一个懒惰的图像加载器，并且很好奇如何避免setTimeout()在ngAfterViewInit()可能的情况下调用我的.

代码的相关部分是：

# component
ngOnInit(): void {
  this.workService.getCategories().then(workCategories => {
    this.workCategories = workCategories;
  });
}

ngAfterViewInit(): void {
  setTimeout(() => {
    const images = Array.from(document.querySelectorAll('.lazy-image'));
  }, 100);
}

# component template
<div *ngFor="let workCategory of workCategories">
  <h3>{{ workCategory.fields.name }}</h3>
  <div *ngFor="let workSample of workCategory.fields.workSamples">
    <img width="294" height="294" class="lazy-image" src="..." data-src="..." />
  </div>
</div>

如果我删除setTimeout()图像数组始终为空。AfterViewInit应该在所有子组件创建后运行。我也尝试过 AfterContentInit，它的行为与 AfterContentChecked 相同，后者导致 Chrome 崩溃。

在这种情况下是否可以避免 setTimeout ？

Answer 1

此 stackblitz显示了一种在使用指令创建元素时收到通知的方法ngFor。在模板中，您将模板引用变量分配给#lazyImage元素img：

<div *ngFor="let workCategory of workCategories">
  ...
  <div *ngFor="let workSample of workCategory.fields.workSamples">
    <img #lazyImage width="294" height="294" class="lazy-image" src="..." data-src="..." />
  </div>
</div>

在代码中，@ViewChildren("lazyImage")用于声明QueryList<ElementRef>与这些图像相关联的。通过订阅inchanges事件，您会在元素可用时收到通知。然后可以从以下位置检索 HTML 元素：QuerylistngAfterViewInitQueryList

import { Component, ViewChildren, AfterViewInit, QueryList } from '@angular/core';

@Component({
  ...
})
export class AppComponent {

  @ViewChildren("lazyImage") lazyImages: QueryList<ElementRef>;

  ngAfterViewInit() {
    this.lazyImages.changes.subscribe(() => {
      let images = this.lazyImages.toArray().map(x => x.nativeElement);
    });
  }
}

如果只处理最后创建的项目，QueryList.last可以使用：

    this.lazyImages.changes.subscribe(() => {
      this.doSomethingOnLastImage(this.lazyImages.last);
    });