В 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-элементов.

Удачного кодирования!