angular - 动态计算子组件的高度

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>

但它在无限循环中进行，我不知道为什么，但我猜 View 的渲染速度不如 while 循环。那么如何解决这个问题。请帮助。

Answer 1

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