Как на Angular сделать отрисовку компонента при скролле?

Question

[Роман Ракзин]

У меня есть страница, где много компонентов. Я хотел бы разгрузить работу с DOM и отрисовать сперва только верхние компоненты и при скролле отрисовывать следующие.
Как это удобно сделать?
Какое поведение будет, если человек при перезагрузке страницы стоял на середине страницы и верхние компоненты отрисуются сразу или только при скролле?

Answer 1

[Виталий Кадыров]

Очень просто - отслеживайте скролл через HostListener или как я делал пагинацию со скроллом используйте IntersectionObserver API и при инициализации страницы через *ngIf не показывайте невидимую часть контента. При использовании IntersectionObserver выставьте в верстке прозрачные блоки по пикселю(это обязательно - с нулевой высотой не сработает) между вашими секциями на странице и точно также через *ngIf меняйте флаг при скролле на трушный. А чтобы при перезагрузке оставаться в том же месте в ангуляре надо заюзать хэша в урле и точно также по нимскроллить до того момента где юзер остановился. Тут я даже два способа написал на выбор - но в обоих без структурных директив не обойтись - разница в способах контроля скролла.