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

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

代码的相关部分是：

# 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(),则images数组始终为空. AfterViewInit应在创建所有子组件后运行.我也尝试过AfterContentinit,它的行为与AfterContentChecked相同,后者崩溃了Chrome.

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

解决方法:

This 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>与这些图像相关联.通过在ngAfterViewInit中订阅Querylist的更改事件,您可以在元素可用时收到通知.然后可以从QueryList检索HTML元素：

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);
    });