Я разрабатываю приложение "Угловое", и мне приходится сталкиваться с некоторыми проблемами.
Я в ситуации, когда мне приходится загружать несколько дочерних компонентов внутри родительского компонента-контейнера. Детский компонент загружается один под другим. Я хочу загрузить "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. Итак, как решить эту проблему. Пожалуйста, помогите.
Я создал демоверсию, которая обеспечивает решение вашей проблемы. Здесь: https://stackblitz.com/edit/angular-9hd2no.
Вместо того, чтобы использовать петлю, я положил свою логику внутри interval, который будет повторяться до stopCondition это true. Я также добавил несколько классов в styles.css и app.component.css чтобы высота родительского компонента увеличивалась по мере увеличения числа дочерних компонентов. Надеюсь это поможет.
Возможно, попробуйте использовать 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>
GetBoundingClientRect возвращает идеальное значение только после завершения рендеринга. Поэтому вы должны отображать один элемент за раз и добавлять элемент только в том случае, если свиток не отображается.