Что такое HostBinding и HostListener?angular-56

HostBinding и HostListener — это декораторы в Angular, которые позволяют взаимодействовать с хост-элементом компонента или директивы. Они обеспечивают удобный способ управления свойствами и событиями элемента, на котором размещена директива или компонент.

HostBinding

@HostBinding() — это декоратор, который позволяет динамически привязывать свойство класса к атрибуту или свойству DOM хоста.

Как это работает:

• Связывает свойство класса с атрибутом/свойством хоста
• При изменении значения свойства класса Angular автоматически обновляет хост
• Может использоваться для управления классами, стилями, атрибутами и др.

Пример использования:

@Component({
  selector: 'app-highlight',
  template: '<ng-content></ng-content>'
})
export class HighlightComponent {
  @HostBinding('class.active') isActive = false;
  @HostBinding('style.color') color = 'red';
  @HostBinding('attr.role') role = 'button';
}

В этом примере:

• При isActive = true к хосту добавится класс active
• Цвет текста будет red
• Хост получит атрибут role="button"

HostListener

@HostListener() — это декоратор для подписки на события DOM хоста.

Особенности:

• Позволяет реагировать на события хоста
• Автоматически отписывается при уничтожении компонента/директивы
• Может обрабатывать как стандартные DOM-события, так и кастомные

Пример использования:

@Directive({
  selector: '[appTooltip]'
})
export class TooltipDirective {
  @HostListener('mouseenter') onMouseEnter() {
    this.showTooltip();
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.hideTooltip();
  }

  @HostListener('click', ['$event']) onClick(event: MouseEvent) {
    console.log('Clicked', event);
  }
}

Здесь:

• Директива реагирует на mouseenter, mouseleave и click
• Для click передается объект события через аргументы

Практические различия

Особенность	HostBinding	HostListener
Назначение	Привязка свойств	Подписка на события
Аргументы	Имя свойства/атрибута	Имя события + опциональные параметры
Обновление	Автоматическое	Только при срабатывании события

Комбинированное использование

Часто эти декораторы используют вместе:

@Directive({
  selector: '[appToggle]'
})
export class ToggleDirective {
  @HostBinding('class.active') isActive = false;

  @HostListener('click') toggle() {
    this.isActive = !this.isActive;
  }
}

Резюмируем

1. HostBinding — для управления свойствами хоста
2. HostListener — для обработки событий хоста
3. Оба декоратора упрощают взаимодействие с хост-элементом
4. Широко используются при создании директив
5. Автоматически управляют подписками и обновлениями

Эти декораторы — мощные инструменты для создания гибких и переиспользуемых компонентов и директив в Angular.