动态计算子组件的高度

Question

我正在开发一个Angular应用程序，而且我正面临一些问题。

我遇到的情况是我必须在父容器组件中加载多个子组件。子组件一个接一个地加载。我想加载＆＃39; n＆＃39;滚动可见的组件数量，以便我可以处理子组件的延迟加载。截至目前，我正试图使用​​以下条件。

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

和html代码如下

{{1}}

但是它在一个无限循环中继续进行而且我不知道为什么但我认为视图的渲染速度不如while循环。那么如何解决这个问题。请帮助。

Answer 1

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

Answer 2

也许尝试使用trackBy为您*ngFor这样，它不会刷新所有元素，而只是在您更改集合时只添加一个新元素。它可以成为无限循环的解决方案。

我尝试这样的事情

  trackByFn(index, item) {
    return index;
  }

和html

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

Answer 3

GetBoundingClientRect 仅在渲染完成后返回完美值。所以 你应该一次渲染一个元素，只有当滚动不可见时才追加元素。