Disse dekoratørene lar en direktiv eller komponent manipulere og reagere på vertelementet sitt — elementet som direktiven sitter på (eller komponentens eget rotelement). @HostBinding setter egenskaper/attributter på verten; @HostListener lytter etter hendelser på det.
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding binder reaktivt en class/style/attribute/property på vertelementet til et komponentfelt — endre feltet og verten oppdateres.
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-hendelse på verten (og kan motta $event og andre argumenter). Sammen lar de en direktiv være helt selvforsynt: den lytter etter hendelser på sin vert og oppdaterer reaktivt vertens utseende.
<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 standardverktøyene for at direktivter skal samhandle med vertelementet sitt — legge til klasser/stiler/attributter og reagere deklarativt på hendelser, uten å manuelt gripe ElementRef.nativeElement og kable lyttere.
De er essensielle for å bygge gjenbrukbare atferdsdirektiver (highlight, tooltip, draggable, tilgjengelige widgets) rent, og de håndterer automatisk endringer i deteksjon og lyttereien som manuell DOM-kode ville måttet administrere.