Обработка клика за пределами компонента в Angular

Быстрый ответ

Для отслеживания кликов вне рамок компонента Angular, вы можете использовать декоратор @HostListener. Он слежует за кликами по документу. Чтобы определить, прошёл ли клик вне вашего компонента, сравните целевой элемент клика с элементом компонента внутри вашей директивы:

import { Directive, ElementRef, Output, EventEmitter, HostListener } from '@angular/core';

@Directive({ selector: '[appClickOutside]' })
export class ClickOutsideDirective {
  @Output() clickOutside = new EventEmitter<void>();

  constructor(private elementRef: ElementRef) {}

  @HostListener('document:click', ['$event.target'])
  public onDocumentClick(targetElement: HTMLElement): void {
    const clickedInside = this.elementRef.nativeElement.contains(targetElement);
    if (!clickedInside) {
      this.clickOutside.emit();
    }
  }
}

Чтобы применять данную директиву, добавьте её к соответствующим элементам следующим образом:

<div appClickOutside (clickOutside)="onOutsideClick()">
  <!-- Содержимое вашего компонента -->
</div>

Функция onOutsideClick() отвечает за обработку кликов вне области компонента.

Обеспечиваем производительность с помощью эффективного отказа от подписки

Когда работаете с отслеживанием кликов, важно обратить внимание на производительность приложения и предостеречься утечек памяти, которые могут быть вызваны нерегулированным применением обработчиков событий. Убедитесь, что слушатель событий будет удалён, когда директива уничтожится:

@HostListener('document:click', ['$event.target'])
public onDocumentClick(targetElement: HTMLElement): void {
  // code…

  ngOnDestroy() {
    this.clickOutside.complete();
  }
}

Вызывая метод complete() для EventEmitter, мы гарантируем, что новые значения не будут передаваться. Это помогает поддерживать чистоту кода и предотвращает утечки памяти.

Будьте осторожны при использовании ngIf, так как это может привести к удалению элемента с активной директивой и сохранению ссылок на недействительные состояния.

Продвинутые методы обнаружения для сложных ситуаций

Глобальный сервис утилит приносит помощь

В сложных случаях, когда компоненты взаимодействуют, может понадобиться глобальный сервис:

@Injectable({ providedIn: 'root' })
export class ClickOutsideService {
  private _clickedOutsideSource = new BehaviorSubject<HTMLElement>(null);

  public clickedOutside$ = this._clickedOutsideSource.asObservable();

  public emitClickedOutsideElement(target: HTMLElement): void {
    this._clickedOutsideSource.next(target);
  }
}

Подписавшись на clickedOutside$, вы сможете гибко реагировать на клики за пределами в разных компонентах.

Подробнее об этом расскажет наш спикер на видео

Метод 'contains' всегда к вашим услугам

Метод contains позволяет быстро проверить, произошёл ли клик внутри элемента:

const clickedInside = this.elementRef.nativeElement.contains(targetElement);

Выполняем только нужные действия!

Если клик за пределами запускает трудоёмкие операции, предварительные проверки помогут избежать излишних действий. К примеру, избыточного закрытия списков при стабильном состоянии.

Управляем фокусом при помощи флагов

Используя события фокусировки и настроенные события, вы можете детализировать управление поведением компонента в ответ на внешние клики:

@HostListener('focus')
onFocus() {
  this.hasFocus = true;
}

@HostListener('document:click', ['$event.target'])
public onDocumentClick(targetElement: HTMLElement): void {
  if (this.hasFocus && !this.elementRef.nativeElement.contains(targetElement)) {
    this.hasFocus = false;
    this.emitClickOutside();
  }
}

Визуализация

Представьте компонент Angular как замок, окружённый рвом. Если стрела врага упадет за пределами замка, ваша королевская стража немедленно это заметит:

🏰 Внутри: Мы следим за каждым кликом, сир!
💦 Ров: Внимание, враг обнаружен! 🏹

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

Больше чем простое обнаружение — улучшение пользовательского опыта!

Используем stopPropagation

Чтобы избежать распространения событий на родительские элементы, применяйте stopPropagation, особенно во вложенных компонентах:

onClick(event: Event): void {
  event.stopPropagation();
}

Улучшаем взаимодействие с пользователем

Тщательно продуманные UI-элементы, например, выпадающие списки и модальные окна, требуют точного контроля над кликами вне области для идеального пользовательского опыта.

Производительность — приоритет

Важно поддерживать баланс между улучшением пользовательского опыта и производительностью приложения. Используйте новые возможности только в случае реальной необходимости.

Полезные материалы

1. Официальная документация Angular о работе с пользовательскими событиями.
2. Обзор порядка обработки событий в JavaScript и методов обработки кликов за пределами элементов.
3. Документация Angular по использованию HostListener.
4. Руководство по RxJS Observables, необходимое для управления асинхронными событиями.
5. Основы работы с событиями клика в веб-API на MDN.
6. Статья на Medium о создании директивы для обработки кликов вне области компонента Angular.
7. Детали о продвинутых методах обнаружения кликов в Angular на Angular University.