Co dělají @HostBinding a @HostListener?

Question

Accepted Answer

Tyto dekorátory umožňují direktivě nebo komponentě manipulovat a reagovat na **prvek hostitele** — prvek, na kterém direktiva sedí (nebo vlastní kořenový prvek komponenty). `@HostBinding` nastavuje vlastnosti/atributy na hostiteli; `@HostListener` na něm naslouchá událostem. ## @HostBinding — vázání na vlastnosti/atributy hostitele ```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` reaktivně váže třídu/styl/atribut/vlastnost na prvku hostitele k poli komponenty — změňte pole a hostitel se aktualizuje. ## @HostListener — reagujte na události hostitele ```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` se přihlásí k odběru DOM události na hostiteli (a může přijmout `$event` a další argumenty). Společně umožňují direktivě být zcela samostatná: naslouchá událostem na svém hostiteli a reaktivně aktualizuje vzhled hostitele. ## Kompletní příklad: zvýraznění při najetí ```text

Hover me

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

's background → mouseleave fires onLeave() → clears it ``` ## Alternativa metadat hostitele ```ts @Directive({ selector: "[appHighlight]", host: { // equivalent, declared in metadata "[class.active]": "isActive", "(click)": "onClick($event)", }, }) ``` ## Proč to záleží `@HostBinding` a `@HostListener` jsou standardní nástroje pro **direktivy** k interakci s jejich prvkem hostitele — deklarativně přidávání tříd/stylů/atributů a reagování na události, aniž by bylo nutné ručně získávat `ElementRef.nativeElement` a kabelovat posluchače. Jsou nezbytné pro čisté vytváření znovupoužitelných direktiv chování (zvýraznění, tooltip, tažitelné, přístupné widgety) a automaticky zpracovávají detekci změn a čištění posluchačů, které by musel ručně spravovat kód DOM.