Waɗannan decorators suna ba da izin zuwa directive ko abin aiki don manipula kuma karɓa matakin gaida shi — abin da directive ke jira (ko kuma bangare na asali na abin aiki). @HostBinding saka kayan kaida/halayen akan gida; @HostListener sai ke saurara abubuwan da suke faruwa a gida.
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding yana cakawa matakin idon da lama rubutu/salon/kayan kaida/kadarorin akan abin host zuwa filin abin aiki — canja filin kuma gida ya sauya.
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 sai ke na kai gida abin da ya faru a DOM (kuma zai iya karɓar $event da sauran sababi). Juna, sai kwa sa ta ba da izin wa directive zama cikakke kashi: yana saurara abubuwan da suke faruwa akan gaida kuma yana cakawa fasalin gida.
<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 da @HostListener sune kayan aiki na gida don directives su kasua da gaida - haka kawo kayan kaida/salon/halayen kuma amsa abubuwan jiya a cikin faɗi, ba tare da kowa sa ElementRef.nativeElement kuma ba da makilin maimakon haka.
Suna da mahimmanci don gina directives na rayuwar da za'a bukata (highlight, tooltip, draggable, accessible widgets) soye, kuma suna sarrafa ta kiyaye bincike da tsegine maimakon cewa kodensa DOM ta tabbatacce zai buƙaci.