Что делают @HostBinding и @HostListener?

Question

Accepted Answer

Эти декораторы позволяют директиве или компоненту манипулировать и реагировать на **элемент хоста** — элемент, на котором находится директива (или собственный корневой элемент компоненты). `@HostBinding` устанавливает свойства/атрибуты на хост; `@HostListener` прослушивает события на нём. ## @HostBinding — привязка к свойствам/атрибутам хоста ```ts import { Directive, HostBinding } from "@angular/core"; @Directive({ selector: "[appHighlight]" }) export class HighlightDirective { @HostBinding("class.active") isActive = false; // toggle a CSS class on the host @HostBinding("style.color") color = "black"; // bind an inline style @HostBinding("attr.role") role = "button"; // set an attribute } ``` `@HostBinding` реактивно привязывает класс/стиль/атрибут/свойство на элемент хоста к полю компоненты — измените поле, и хост обновится. ## @HostListener — реагирование на события хоста ```ts import { Directive, HostListener, HostBinding } from "@angular/core"; @Directive({ selector: "[appHighlight]" }) export class HighlightDirective { @HostBinding("style.background") bg = ""; @HostListener("mouseenter") onEnter() { this.bg = "yellow"; // changing the field updates the host via HostBinding } @HostListener("mouseleave") onLeave() { this.bg = ""; } @HostListener("click", ["$event"]) onClick(event: MouseEvent) { console.log("host clicked", event); } } ``` `@HostListener` подписывается на событие DOM на хосте (и может получать `$event` и другие аргументы). Вместе они делают директиву полностью самодостаточной: она прослушивает события на своём хосте и реактивно обновляет внешний вид хоста. ## Полный пример: подсветка при наведении ```text

Hover me

→ mouseenter fires onEnter() → sets bg='yellow' → @HostBinding updates the

's background → mouseleave fires onLeave() → clears it ``` ## Альтернатива с метаданными хоста ```ts @Directive({ selector: "[appHighlight]", host: { // equivalent, declared in metadata "[class.active]": "isActive", "(click)": "onClick($event)", }, }) ``` ## Почему это важно `@HostBinding` и `@HostListener` — это стандартные инструменты для взаимодействия **директив** с элементом хоста — добавление классов/стилей/атрибутов и реактивного ответа на события декларативно, без ручного захвата `ElementRef.nativeElement` и подключения слушателей. Они необходимы для чистой разработки переиспользуемых директив поведения (highlight, tooltip, draggable, доступные виджеты), и автоматически управляют обнаружением изменений и очисткой слушателей, которые пришлось бы вручную обрабатывать в коде работы с DOM.