От автора: при работе с большим количеством контента может оказаться полезным добавить на ваш сайт функцию бесконечной прокрутки. Когда я говорю «бесконечная прокрутка», я имею в виду страницу, добавляющую новый контент, пока пользователь продолжает прокручивать ее, создавая иллюзию бесконечной прокрутки страницы. Многие веб-сайты используют эту функцию, и она может быть гибкой альтернативой нумерации страниц.
Несмотря на то, что существует множество различных способов реализации этого, давайте рассмотрим, как мы можем сделать это с помощью Angular Component Dev Kit (CDK).
Настройка
Начнем с добавления в проект пакета @angular/cdk:
|
1 |
$ npm install @angular/cdk |
Чтобы использовать функции бесконечной прокрутки в этом пакете, импортируйте ScrollingModule в app.module.ts:
|
1 |
import { ScrollingModule} from '@angular/cdk/scrolling'; |
Затем добавьте его в импорт:
|
1 2 3 |
imports: [ ScrollingModule ] |
Теперь вы готовы начать!
Реализация бесконечной прокрутки
Мы собираемся создать компонент, который отображает случайные исторические события. Когда пользователь достигнет конца прокрутки, приложение загрузит следующие факты. Для целей этого руководства я не буду вдаваться в детали построения сервиса.
Пока предположим, что у нас есть FactService, который предоставляет только следующую функцию:
|
1 |
getRandomFact(); |
Мы будем извлекать 10 фактов за раз, и каждый раз, когда пользователь прокручивает страницу до конца, мы запрашиваем еще 10 фактов.
FactScrollerComponent
Создайте новый компонент, который будет действовать как бесконечный скроллер. Я вызываю FactScrollerComponent. Вы можете использовать для этого Angular CLI:
|
1 |
$ ng g component fact-scroller |
Убедитесь, что новый компонент импортирован в app.module.ts и добавлен в объявления:
|
1 2 3 4 |
import { ScrollingModule } from '@angular/cdk/scrolling'; declarations: [ FactScrollerComponent ] |
В fact-scroller.component.html мы создадим:
|
1 2 3 4 5 |
<cdk-virtual-scroll-viewport itemSize="100"> <li *cdkVirtualFor="let fact of dataSource"> <!-- Print stuff here --> </li> </cdk-virtual-scroll-viewport> |
Здесь мы используем наш виртуальный скроллер cdk-virtual-scroll-viewport. В нем мы перебираем через цикл элементаы, используя *cdkVirtualFor, что аналогично использованию *ngFor.
Чтобы компонент правильно определил размер внутреннего скроллера, нам нужно сообщить скроллеру, какой будет высота каждого элемента (в пикселях). Это делается с использованием директивы itemSize. Таким образом, itemSize=»100″ означает, что элемент в списке будет иметь высоту 100px.
Мы также указали скроллеру извлечь данные dataSource, которых еще нет, поэтому нужно создать их сейчас.
Пользовательский FactsDataSource
В файле fact-scroller.component.ts нам нужно определить, как выглядит источник данных. Для этого мы расширим класс DataSource в @angular/cdk/collections. Вот как выглядит источник данных:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import { CollectionViewer, DataSource } from '@angular/cdk/collections'; export interface Fact { text?: string; date?: string; } export class FactsDataSource extends DataSource<Fact | undefined> { private cachedFacts = Array.from<Fact>({ length: 0 }); private dataStream = new BehaviorSubject<(Fact | undefined)[]>(this.cachedFacts); private subscription = new Subscription(); constructor(private factService: FactService) { super(); } connect(collectionViewer: CollectionViewer): Observable<(Fact | undefined)[] | ReadonlyArray<Fact | undefined>> { this.subscription.add(collectionViewer.viewChange.subscribe(range => { // Update the data })); return this.dataStream; } disconnect(collectionViewer: CollectionViewer): void { this.subscription.unsubscribe(); } } |
Здесь много кода, так что давайте разберемся с этим по порядку. Сначала мы определяем модель Fact, которая будет определять структуру данных.
Внутри FactsDataSource нам нужно реализовать две функции: connect() и disconnect(). Источник данных подписывается на любые изменения в средстве просмотра коллекции (например, прокрутки пользователя), а затем выполняет действие и возвращает поток данных. Мы указали источнику данных, чтобы он получал следующие данные, когда мы достигнем конца списка.
Мы также объявили три переменные-члена:
cachedFacts: кэшированные результаты,
dataStream: RxJS BehaviorSubject для распространения изменений в наших кэшированных результатах, и
subscription: подписка для прослушивания изменений коллекции представлений.
Давайте определим несколько вспомогательных функций в этом классе:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
private pageSize = 10; private lastPage = 0; private _fetchFactPage(): void { for (let i = 0; i < this.pageSize; ++i) { this.factService.getRandomFact().subscribe(res => { this.cachedFacts = this.cachedFacts.concat(res); this.dataStream.next(this.cachedFacts); }); } } private _getPageForIndex(i: number): number { return Math.floor(i / this.pageSize); } |
Я устанавливаю размер страницы — 10, что означает, что я хочу получить 10 фактов за раз. Я также собираюсь отслеживать последнюю загруженную страницу.
_fetchFactPage() просто выполняет вызов к сервису, чтобы получить некоторые факты, которые затем добавляются в кеш.
_getPageForIndex() преобразует индекс строки в значение страницы (или пачки).
Собрав все это вместе, мы можем определить, как список будет обновляться в обратном вызове подписки:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
connect(collectionViewer: CollectionViewer): Observable<(Fact | undefined)[] | ReadonlyArray<Fact | undefined>> { this.subscription.add(collectionViewer.viewChange.subscribe(range => { const currentPage = this._getPageForIndex(range.end); if (currentPage > this.lastPage) { this.lastPage = currentPage; this._fetchFactPage(); } })); return this.dataStream; } |
Мы также хотим, чтобы с самого начала у нас уже были некоторые данные, для этого мы можем вызвать функцию fetch в конструкторе:
|
1 2 3 4 5 6 |
constructor(private factService: FactService) { super(); // Start with some data. this._fetchFactPage(); } |
Наш пользовательский источник данных теперь должен привести нас туда, куда нам нужно. Последняя часть, чтобы собрать все это вместе, это добавить новый источник данных в компонент.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@Component({ selector: 'app-fact-scroller', templateUrl: './fact-scroller.component.html', styleUrls: ['./fact-scroller.component.scss'] }) export class FactScrollerComponent { dataSource: FactsDataSource; constructor(private factService: FactService) { this.dataSource = new FactsDataSource(factService); } } |
И все готово! С этого момента все форматируется. Я переписал HTML, чтобы вывести факты таким образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<cdk-virtual-scroll-viewport itemSize="100" class="fact-scroll-viewport"> <li *cdkVirtualFor="let fact of dataSource"> <div *ngIf="fact" class="fact-item"> <div class="fact-date">{{ fact.year }}</div> <div class="fact-text">{{ fact.text }}</div> </div> <div *ngIf="!fact"> Loading ... </div> </li> </cdk-virtual-scroll-viewport> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@Component({ selector: 'app-fact-scroller', templateUrl: './fact-scroller.component.html', styleUrls: ['./fact-scroller.component.scss'] }) export class FactScrollerComponent { dataSource: FactsDataSource; constructor(private factService: FactService) { this.dataSource = new FactsDataSource(factService); } } |
Удачной прокрутки!
Автор: Chris Engelsma
Источник: //alligator.io
Редакция: Команда webformyself.
