dom 的 ngAfterViewInit 生命周期挂钩图像是否已完全加载？

Question

所以在我当前的项目中，我正在尝试创建一个产品 slider.For 要正常工作，我需要获取所有产品的宽度，以便我可以计算出总的 width.Currently 我的内容我正在做的是

 ngAfterViewInit(): void {
    this.service.getData().subscribe((items) => {
      for (let key in items) {
        this.items.push(items[key]);
      }
      this.cd.detectChanges();
      this.cards = this.elem.nativeElement.querySelectorAll('.card');
      console.log(this.cards); // In this log i am getting all the cards have the correct width
      this.cards.forEach((card) => {
        console.log(card.getBoundingClientRect());//But in this log widths are different
        this.totalWidth += card.clientWidth;
      });
      console.log(this.totalWidth);
    });
  }

在 ngAfterViewInit 调用我的后端并将其设置为 laocal 变量后，我手动运行更改 Detection.After 如果我是控制台日志记录，我正在获取所有项目的节点列表都正确 width.But 如果我尝试遍历节点列表以获得总宽度我在每张卡片中变得不同 values.Here 我目前显示一张图像而一张 text.I 没有将卡片的宽度设置为固定值，我将图像的高度设置为固定值应用宽度对应于该高度所以图像将 responsive.So 我在节点列表上循环给我错误的宽度值，直到图像从内存加载 cache.So 我的猜测是加载图像需要一定的时间，我的卡的宽度取决于图像宽度，这就是为什么如果我尝试遍历 nodelist.But 时我得到错误宽度值的原因，而不是为什么节点列表中的宽度值是正确的，并且如果我尝试遍历它们，为什么它会改变？我应该如何解决这个问题以根据每张卡片的宽度获得总宽度在不使用 setTimeOut().

的情况下加载我的组件

这是演示 stackblitz 代码 - https://stackblitz.com/edit/angular-ivy-czs5mo?file=src/app/app.component.ts

Answer 1

你需要检查，在你的图像中事件 (load)。有的喜欢

<img src="https://picsum.photos/200/300" (load)="onLoad()"/>

count:number=0;
yet:boolean=false;
onLoad()
{
   count++;
   this.checkWidth()
}

ngAfterViewInit()
{
    this.yet=true;
    this.checkWidth()
}
this.checkWidth()
{
   if (this.yet && count==imagesLength)
   {
       ..do something..
   }
}

注意：改为使用

//I don't like so much
this.elem.nativeElement.querySelectorAll('.card');

您可以在 .html 中使用 referenceVariable #card 并使用 ViewChildren

控制元素

@ViewChildren('card') cards:QueryList<ElementRef>

并使用

this.cards.forEach(x=>{
   const rect=x.nativeElement.getBoundingClientRect()
   console.log(rect)
   ...
})

dom 的 ngAfterViewInit 生命周期挂钩图像是否已完全加载？

In ngAfterViewInit life cycle hook images of the dom gets loaded completely?

javascript

angular

angular-lifecycle-hooks