Dessa dekoratörer låter ett direktiv eller en komponent manipulera och reagera på sitt host-element — elementet som direktivet sitter på (eller komponentens egen rotelement). @HostBinding ställer in egenskaper/attribut på hosten; @HostListener lyssnar på händelser på det.
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding binder reaktivt en klass/stil/attribut/egenskap på host-elementet till ett komponentfält — ändra fältet och hosten uppdateras.
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 prenumererar på en DOM-händelse på hosten (och kan ta emot $event och andra argument). Tillsammans låter de ett direktiv vara helt självständigt: det lyssnar på händelser på sin värd och uppdaterar reaktivt värdvärdena.
<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 och @HostListener är standardverktygen för direktiv att interagera med sitt host-element — lägga till klasser/stilar/attribut och reagera på händelser deklarativt, utan att manuellt hämta ElementRef.nativeElement och ansluta lyssnare.
De är väsentliga för att bygga återanvändbara beteendedirektiv (markering, tooltip, draggbar, tillgängliga widgetar) rent, och de hanterar automatiskt ändringsdetektering och lyssnrensning som manuell DOM-kod skulle behöva hantera.