В Angular директивы — это мощный способ расширить функциональность HTML-элементов. В этом уроке мы создадим динамическую директиву, которую можно применить к любому элементу HTML, чтобы определить, когда он находится в центре окна. Эта директива будет использовать мощь RxJS для прослушивания событий прокрутки, ограничения их производительности и регистрации сообщения на консоли, когда элемент находится в центре окна просмотра, однако вы можете настроить это для выполнения функции или любого другого операция.
Шаг 1. Настройка проекта
Начнем с настройки проекта Angular. Если у вас его нет, просто запустите следующую команду в своем терминале:
ng new my-app
Шаг 2. Создание директивы
Теперь, когда у нас есть проект, давайте сгенерируем директиву с помощью следующей команды:
ng generate directive element-in-viewport
Потрясающий! Теперь вы должны увидеть новый файл с именем element-in-viewport.directive.ts
в вашем каталоге src/app/directives
.
Шаг 3. Импорт необходимых зависимостей
В этой директиве мы будем использовать RxJS для прослушивания события scroll
и регулирования его производительности. Чтобы импортировать необходимые зависимости, добавьте следующий код в начало файла in-viewport.directive.ts
:
import { Directive, ElementRef, AfterViewInit } from '@angular/core'; import { fromEvent, Observable } from 'rxjs'; import { throttleTime } from 'rxjs/operators';
Шаг 4. Определение директивы
Теперь пришло время определить директиву. В этой директиве мы будем использовать метод fromEvent
для прослушивания события scroll
в объекте window
. Мы также будем использовать оператор throttleTime
для ограничения частоты событий в целях повышения производительности.
Далее мы будем использовать метод getBoundingClientRect
для определения положения элемента относительно области просмотра. Если верх и низ элемента находятся в пределах границ окна, мы запишем в консоль сообщение о том, что элемент находится в центре области просмотра.
@Directive({ selector: '[elementInViewport]' }) export class ElementInViewportDirective implements AfterViewInit { private element: HTMLElement; constructor(private el: ElementRef) { this.element = el.nativeElement; } ngAfterViewInit() { const scroll$: Observable<Event> = fromEvent(window, 'scroll').pipe(throttleTime(100)); scroll$.subscribe(event => { const rect = this.element.getBoundingClientRect(); const windowHeight = (window.innerHeight || document.documentElement.clientHeight); if (rect.top >= 0 && rect.bottom <= windowHeight) { console.log('Element is in the center of the viewport!'); } }); } }
Шаг 5. Использование директивы
Вот и все! Теперь вы можете добавить директиву к любому элементу вашего HTML-шаблона, используя следующий синтаксис:
<div elementInViewport>Once this element reaches the middle of the screen, we'll log a message to the console.</div>
И вот она, динамическая директива Angular, которую можно применить к любому элементу, чтобы определить, когда он находится в центре окна просмотра. Мощь RxJS в сочетании с директивами Angular предоставляет бесконечные возможности, когда дело доходит до настройки ваших HTML-элементов.
Удачного кодирования!