动态计算子组件的高度

Question

我正在开发一个Angular应用程序,我正面临一些问题.

我处于这样一种情况,我必须在父容器组件中加载多个子组件.子组件一个接一个地加载.我想加载'n'个组件,直到滚动可见,这样我就可以处理子组件的延迟加载.截至目前,我正在尝试使用以下条件.

while (window.screen.height > 
   this.elementRef.nativeElement.getBoundingClientRect().height) 
   {
      this.child= this.childSet.slice(0, this.count+1);
   }

和html代码如下

<child*ngFor="let child of childSet" [value]="child " [column-size]="child .size ? child .size : 12"></child>

但它在无限循环中进行,我不知道为什么,但我猜视图的渲染速度不如while循环.那么如何解决这个问题.请帮忙.

Answer 1

我创建了一个演示，可以解决您的问题。这里： https: //stackblitz.com/edit/angular-9hd2no。
我没有使用循环，而是将您的逻辑放在 an 中interval，它将不断重复直到stopConditionis true。我还在styles.css和中添加了一些类app.component.css，以使父组件高度随着子组件数量的增加而增长。希望这可以帮助。