Визуализация списков с использованием бесконечной прокрутки в AngularJS

Лучший и более динамичный способ рендеринга длинных списков элементов в DOM.

Когда мы работаем с большим списком данных, обработка этих данных в DOM всегда является проблемой с точки зрения эффективности и повышения производительности.

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

Пример

```javascript

если данные представляют собой массив [] длиной 100

Поскольку данные [] имеют длину 100, они создадут 100 узлов в DOM.

Проблема

В приведенном выше примере мы взяли данные длиной 100, предположим, что у них больше данных, тогда они создадут больше узлов в DOM, а с увеличением размера данных это замедлит наше приложение, оно начнет раздувать нашу DOM и страницу.

Решение

Angular(7+) дает нам доступ к новому поведению виртуальной прокрутки в Material Component Development Kit (CDK). Он предоставляет инструменты для зацикливания данных, которые отображают элементы только тогда, когда они видны в окне просмотра, и обеспечивает лучший и более динамичный способ эффективного отображения длинных списков элементов в DOM.

Комплект разработки компонентов (CDK)
Это набор инструментов, которые реализуют общее поведение. Это своего рода абстракция библиотеки материалов Angular без стилей, характерных для дизайна материалов.

Давайте реализуем бесконечную виртуальную прокрутку

Предварительные требования — Angular (версия 7 или 7+), Node версии 11.0 или выше.

Шаг 1. Добавьте пакет @angular/CDK

```javascript

npm установить @angular/cdk

Шаг 2: импортируйте ScrollingModule в свой модуль

```javascript

импортировать {ScrollingModule} из '@angular/cdk/scrolling';

импорт: [

ScrollingModule

Шаг 3. Внутри вашего компонента

```javascript

Оберните зацикленный элемент внутри

используйте cdkVirtualFor вместо Ngfor

Директива itemSize сообщает, насколько высоким (высота высоты) будет каждый элемент (в пикселях). Таким образом, itemSize="100" означает, что для элемента в списке потребуется высота 100 пикселей.

Поздравляем, вы закончили базовую бесконечную виртуальную прокрутку. Это улучшит производительность страницы и скорость загрузки данных.

Дополнительная информация с дополнительными функциями cdk-virtual-scroll

Пользовательские события — слушайте событие, когда прокручивается определенный элемент

```javascript

Доступ к CdkVirtualScrollViewport и его методу

```javascript

импортировать {CdkVirtualScrollViewport} из '@angular/cdk/scrolling';

@ViewChild (CdkVirtualScrollViewport)

область просмотра: CdkVirtualScrollViewport;

Методы доступа, такие как

this.viewport.scrollToIndex(23)

*cdkVirtualFor предоставляет некоторые логические переменные в вашем шаблоне

```javascript

<li *cdkVirtualFor="let элемент данных; let index = index;

пусть счет = счет;

пусть первый = первый;

пусть последний = последний;

пусть даже = даже;

пусть нечетное = нечетное;">

Счастливого обучения… 👏👏👏

Эта статья была впервые опубликована [здесь] (https://anilvermaspeaks.medium.com/building-infinite-virtual-scrolling-lists-angular-cdk-scrolling-angular-performance-331a55744dbb)