Disse dekoratorer lader en direktiv eller komponent manipulere og reagere på sitt host-element — det element direktivet sidder på (eller komponentens eget rod-element). @HostBinding sætter egenskaber/attributter på værten; @HostListener lytter efter events på det.
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding reaktivt binder en klasse/stil/attribut/egenskab på host-elementet til et komponent-felt — ændre feltet og værten opdateres.
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 abonnerer på en DOM-event på værten (og kan modtage $event og andre args). Sammen lader de en direktiv være helt selvstændig: den lytter efter events på sin vært og opdaterer reaktivt værtsudseende.
<p appHighlight>Hover me</p>
→ mouseenter fires onEnter() → sets bg='yellow' → @HostBinding updates the <p>'s background
→ mouseleave fires onLeave() → clears it
@Directive({
selector: "[appHighlight]",
host: { // equivalent, declared in metadata
"[class.active]": "isActive",
"(click)": "onClick($event)",
},
})
@HostBinding og @HostListener er standardværktøjerne for direktiver til at interagere med deres host-element — deklarativt tilføje klasser/stilarter/attributter og reagere på events, uden at skulle manuelt få fat i ElementRef.nativeElement og styre listeners.
De er essentielle til at opbygge genanvendelige adfærdsdirektiver (highlight, tooltip, draggable, tilgængelige widgets) rent, og de håndterer automatisk change detection og listener cleanup, som manuel DOM-kode ville skulle styre.