Посібник для Angular

Компонент rk-reel

The rk-reel загортає контролер слайдера з ядра. Автономний, із ChangeDetectionStrategy.OnPush.

Auto-sizing

The size необов’язковий. Якщо його не передати, rk-reel сам вимірює свій контейнер через ResizeObserver і підлаштовується під макет, заданий CSS. Розмір контейнера має задавати батьківський елемент — наприклад, flex, grid або явні розміри в CSS.

Шаблонний патерн rkReelItem

Замість render prop із React в Angular використовується структурна директива rkReelItem на ng-template. Саме це дає віртуалізацію: створюються лише видимі слайди. Контекст шаблону надає три змінні:

Навігація

Вбудовані способи навігації:

• Дотик / свайп: Тягніть, щоб гортати — з інерцією та прилипанням
• Клавіатура: Стрілки та Escape
• Колесо миші: Увімкніть [enableWheel]="true"
• Програмно: Скористайтеся пропсом (apiReady) щоб отримати next(), prev(), goTo()

Стан в URL

createOverlayUrlState будує контролер стану в URL для оверлея й повертає його цілком, а ви передаєте його в *UrlOverlay компонента як його вхід [controller] . Викликайте його в контексті впровадження — в ініціалізаторі поля; він під’єднується одразу й звільняється через DestroyRef. Стан відкриття належить URL, тож прив’язаний оверлей відкривається сам, а посилання — звичайний спосіб його відкрити. Перший запис відсутнього параметра додає один запис в історію, кожен наступний його замінює, тож гортання ніколи не ховає кнопку «назад». Тримайте контролер, щоб читати value/позицією і керувати ним програмно: set(position) відкриває, set(null) закриває, а set — той самий низькорівневий запис, який оверлей робить усередині під час зміни слайда.

Застосунок із роутером — передайте адаптер на базі Router, інакше власне місцеположення роутера застаріє і наступна навігація втратить параметр:

Об’єкт опцій приймає param, codec, та locator (усі три обов’язкові) плюс необов’язковий adapter. codec та locator — узгоджена пара з однаковим Id, so a plain ?photo=3 галерея розгортає ...urlIndexKey(() => images().length), який повертає обидві половини одразу. urlIndexKey обмежує індекс живою кількістю, яку повертає геттер, тож застарілий ?photo=99 відхиляється й сам зникає з URL замість того, щоб відкрити слайд, якого ніхто не називав. Посторінкова стрічка або галерея з адресацією за ідентичністю передає власну узгоджену пару codec + locator . Повна таблиця опцій — у довіднику API для Angular.

ReelIndicator

Необов’язковий компонент, що показує індикатори прогресу в стилі Instagram із поточною позицією в слайдері. Якщо він усередині rk-reel, він сам під’єднується до count та active значення через токен впровадження RK_REEL_CONTEXT — нічого зв’язувати вручну не треба.

Вихід apiReady — патерн на сигналах

The (apiReady) спрацьовує один раз після того, як компонент змонтовано й виміряно. Він видає об’єкт ReelApi який можна зберегти й використовувати для імперативної навігації. Тримати це посилання в сигналах Angular добре поєднується з виявленням змін OnPush .

Головне

• Автономний компонент

  Import ReelComponent, RkReelItemDirective, and optionally ReelIndicatorComponent просто в imports array

• ng-template і rkReelItem

  Відповідник в Angular для пропса itemBuilder із React — дає віртуалізацію

• apiReady

  Вихід, що спрацьовує один раз із імперативним API навігації — жодних запитів через ViewChild

• afterChange

  Emits { index, indexInRange } — стежить за поточним індексом для оновлення інтерфейсу

• OnPush за замовчуванням

  Усі компоненти використовують ChangeDetectionStrategy.OnPush і сигнали Angular заради максимальної продуктивності

Поради щодо продуктивності

• Тримайте шаблони слайдів легкими

  The rkReelItem виконується для кожного видимого слайда (зазвичай трьох одночасно). Уникайте важких обчислень і глибоко вкладених структур усередині.

• Вантажте дані ближче до краю

  Використовуйте (afterChange) щоб помітити наближення до кінця й підвантажити наступний пакет, доки слайди не скінчилися — так виходить нескінченна стрічка.

• Тримайте імперативний стан у сигналах

  Зберігайте посилання ReelApi та поточний індекс у сигналах Angular — це дає точкову реактивність без повного перерендеру компонента.

• Вимикайте колесо на сторінках із прокручуванням

  Set [enableWheel]="false" коли слайдер вбудований у макет із прокручуванням, щоб не перехоплювати прокручування сторінки.