Опубликовано автор в категориях Верстальщику.

people running on road during daytime
Photo by Mārtiņš Zemlickis on Unsplash

С мажорном апдейтом Angular до версии 7, полезные апдейты также получили Angular Material и CDK. Одним из таких полезных обновлений для CDK стала поддержка, так называемого, «виртуального скролла» из коробки. Собственно, мне захотелось попробовать этот компонент внутри приложения созданного с помощью Angular CLI и описать это здесь.

Добавление в проект

Добавить «виртуальный скролл» в проект очень просто. Сначала надо установить зависимости:

npm install --save @angular/cdk

Далее вам нужно импортировать сам модуль в проект, чтобы использовать его внутри любого компонента по желанию. Для этого в файле app.module.ts добавляем импорт:

import { ScrollDispatchModule } from '@angular/cdk/scrolling';

И добавить этот модуль в массив импортов декоратора:

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ScrollDispatchModule
],
providers: [],
bootstrap: [AppComponent]
})

Теперь можно использовать модуль внутри любого компонента в вашем приложении.

Использование в компоненте

Базовое использование очень простое. Добавляем сам скроллер с помощью компонента <cdk-virtual-scroll-viewport> — это своеобразная обертка, которая будет определять область скроллинга.

А сам список формируем с помощью специальной директивы *cdkVirtualFor внутри обертки, которая по сути является заменой для *ngForи позволяет использовать все фичи стандартной директивы.

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
<div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

Обратите внимание на атрибут itemSize в компоненте-обертке. Он определяет высоту одного пункта в списке скроллера. Это самый простой способ определить количество видимых пунктов в скроллере. Например, если вы  зададите ему значение 50, а в CSS стилях для компонента скроллера зададите высоту равную 200 пикселей, то в скроллере будут отображены 4 пункта (200 / 50 = 4).

Относительно разметки выше можно применить такие стили:

.example-viewport {
  height: 200px;
  width: 200px;
}

.example-item {
  height: 50px;
}

Однако вы можете пойти другим путем и обойтись без этого атрибута, используя подход с VirtualScrollStrategy. Если кратко то вам нужно будет класс, который будет использовать VirtualScrollStrategy интерфейс и определять высоту скроллера, высоту пункта в списке как свойства. Более детально и с примером можно посмотреть здесь.

Данные для списка

*cdkVirtualFor принимает данные в виде Array, Observable<Array>, или DataSource. Нужно отметить, что DataSource — это специальный абстрактный класс CDK, который имеет два метода: connect и disconnect. Первый используется для фетча данных, а второй когда виртуальный скролл будет ликвидирован. Данный метод очень удобен для создания динамических списков внутри скролла. Детальнее и с примером реализации класса можно посмотреть здесь.

Стоит лишь отметить, что этот класс должен быть импортирован дополнительно в компоненте, где будет применен скроллер с DataSource:

import {CollectionViewer, DataSource} from '@angular/cdk/collections';

Подведем итоги

Нельзя сказать, что все это невозможно реализовать кастомно для проекта, но иметь в арсенале готовую реализацию в виде довольно стабильного поддерживаемого модуля относительно небольшого размера — это плюс. Не говоря уже о том, что ваши пользователи скажут вам спасибо за быстрый интерфейс.

Один Ответ к записи “Angular 7 и виртуальный скролл”

Оставить комментарий

  • (не будет показан)