Diese Dekoratoren ermöglichen es einer Direktive oder Komponente, ihr Host-Element zu manipulieren und darauf zu reagieren — das Element, auf dem die Direktive sitzt (oder das eigene Root-Element der Komponente). @HostBinding setzt Eigenschaften/Attribute auf dem Host; @HostListener lauscht auf Ereignisse darauf.
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding bindet reaktiv eine Klasse/ein Stil/ein Attribut/eine Eigenschaft auf dem Host-Element an ein Komponentenfeld — ändere das Feld und der Host wird aktualisiert.
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 abonniert ein DOM-Ereignis auf dem Host (und kann $event und andere Argumente empfangen). Zusammen ermöglichen sie einer Direktive, vollständig in sich geschlossen zu sein: Sie lauscht auf Ereignisse auf ihrem Host und aktualisiert reaktiv das Aussehen des Hosts.
<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 und @HostListener sind die Standardwerkzeuge für Direktiven, um mit ihrem Host-Element zu interagieren — deklarativ Klassen/Stile/Attribute hinzufügen und auf Ereignisse reagieren, ohne manuell ElementRef.nativeElement zu greifen und Listener zu verdrahten.
Sie sind unverzichtbar zum sauberen Aufbau wiederverwendbarer Verhaltensrichtlinien (Hervorhebung, Tooltip, Ziehbar, barrierefreie Widgets) und handhaben automatisch Change Detection und Listener-Cleanup, das manueller DOM-Code verwalten müsste.