Ti dekoratorja omogočita direktivni ali komponenti, da manipulira in se odziva na svoj host element — element, na katerem se direktiva nahaja (ali korenska komponenta komponent). @HostBinding nastavi lastnosti/atribute na host; @HostListener prisluškuje dogodkom nanj.
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding reaktivno veže razred/slog/atribut/lastnost na host elementa na polje komponent — sprememba polja in host se posodabi.
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 se naroči na DOM dogodek na hostu (in lahko prejme $event ter druge argumente). Skupaj omogočata, da je direktiva v celoti samovsebovna: prisluškuje dogodkom svojega hostu in reaktivno posodablja videz hostu.
<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 in @HostListener sta standardna orodja za direktive, da vplivata na svoj host element — dodajanju razredov/slogov/atributov in reaktivnega odzivanja na dogodke deklarativno, brez ročnega zajemanja ElementRef.nativeElement in povezovanja poslušalcev.
So bistveni za gradnjo ponovno uporabnih directiv vedenja (poudarjanje, prikaz namiga, vlečenje, dostopna gradnika) čisto, in samodejno upravljajo zaznavo sprememb in čiščenje poslušalcev, ki bi jih ročni DOM kod moral upravljati.