Te dekoratory pozwalają dyrektywę lub komponentowi manipulować i reagować na jej element hosta — element, na którym znajduje się dyrektywa (lub własny element główny komponentu). @HostBinding ustawia właściwości/atrybuty na hoście; @HostListener nasłuchuje na nim zdarzeń.
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding reaktywnie wiąże klasę/styl/atrybut/właściwość na elemencie hosta z polem komponentu — zmień pole, a host się aktualizuje.
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 subskrybuje zdarzenie DOM na hoście (i może otrzymywać $event i inne argumenty). Razem pozwalają dyrektywie być w pełni samodzielna: nasłuchuje zdarzeń na swoim hoście i reaktywnie aktualizuje wygląd hosta.
<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 i @HostListener to standardowe narzędzia dla dyrektyw do interakcji z ich elementem hosta — dodawania klas/stylów/atrybutów i reaktywnego reagowania na zdarzenia deklaratywnie, bez ręcznego pobierania ElementRef.nativeElement i podłączania słuchaczy.
Są niezbędne do czystego budowania wielokrotnego użytku dyrektyw behawioralnych (highlight, tooltip, draggable, dostępne widżety) i automatycznie obsługują detekcję zmian i czyszczenie słuchaczy, które kod ręczny DOM musiałby zarządzać.