Mit csinálnak a @HostBinding és @HostListener dekorátorok?

Question

IT Interview Practice · Accepted Answer

Ezek a dekorátorok lehetővé teszik egy direktívának vagy komponensnek, hogy manipuláljon és reagáljon **host eleméhez** — az elemhez, amelyen a direktíva ül (vagy a komponens saját gyökér elemére). A `@HostBinding` tulajdonságokat/attribútumokat állít be a hoszt-on; a `@HostListener` eseményeket figyel rajta. ## @HostBinding — kötődés a hoszt tulajdonságaihoz/attribútumaihoz ```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 } ``` A `@HostBinding` reaktívan köti össze a hoszt elemen lévő osztályt/stílust/attribútumot/tulajdonságot a komponens mezőjével — módosítsa a mezőt, és a hoszt frissül. ## @HostListener — reagálás a hoszt eseményeire ```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); } } ``` A `@HostListener` feliratkozik a hoszt-on lévő DOM eseményre (és fogadhat `$event` és egyéb argumentumokat). Együtt lehetővé teszik a direktívának, hogy teljesen önálló legyen: figyeli a hoszt-on lévő eseményeket és reaktívan frissíti a hoszt megjelenéseit. ## Teljes példa: hover highlight ```text

Hover me

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

's background → mouseleave fires onLeave() → clears it ``` ## A hoszt metaadat alternatívája ```ts @Directive({ selector: "[appHighlight]", host: { // equivalent, declared in metadata "[class.active]": "isActive", "(click)": "onClick($event)", }, }) ``` ## Miért fontos A `@HostBinding` és `@HostListener` a **direktívák** standard eszközei a hoszt elemükkel való interakcióhoz — osztályok/stílusok/attribútumok hozzáadása és deklaratív reagálás az eseményekre, anélkül, hogy manuálisan meg kellene ragadnunk az `ElementRef.nativeElement`-et és drótoznunk az figyelőket. Esszenciálisak az újrafelhasználható viselkedési direktívák (highlight, tooltip, draggable, hozzáférhető widgetek) tiszta felépítéséhez, és automatikusan kezelik a változásdetektálást és a figyelőmegtisztítást, amelyeket a kézi DOM-kód kezelnie kellene.

@HostBinding — kötődés a hoszt tulajdonságaihoz/attribútumaihoz

@HostListener — reagálás a hoszt eseményeire

Teljes példa: hover highlight

A hoszt metaadat alternatívája

Miért fontos

Kapcsolódó kérdések