આ ડેકોરેટર્સ એક નિર્દેશ અથવા ઘટક તેના host element ને ચાલવી અને તેના પર પ્રતિક્રિયા આપવા દે છે — તે તત્વ જેના પર નિર્દેશ બેઠું છે (અથવા ઘટકનું પોતાનું રુટ તત્વ). @HostBinding હોસ્ટ પર તમામ/લક્ષણો સેટ કરે છે; @HostListener તેના પર ઇવેન્ટ સાંભળે છે.
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding પ્રતિક્રિયાશીલ રીતે host element પર એક વર્ગ/શૈલી/લક્ષણ/સંપત્તિ ને ઘટક ક્ષેત્રમાં બાંધે છે — ક્ષેત્રને બદલો અને હોસ્ટ અપડેટ થાય છે.
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 હોસ્ટ પર DOM ઇવેન્ટને સબ્સ્ક્રાઇબ કરે છે (અને $event અને અન્ય args પણ પ્રાપ્ત કરી શકે છે). એક સાથે, તેઓ એક નિર્દેશને સંપૂર્ણ સ્વતંત્ર બનવા દે છે: તે તેના હોસ્ટ પર ઇવેન્ટ સાંભળે છે અને પ્રતિક્રિયાશીલ રીતે હોસ્ટના દેખાવને અપડેટ કરે છે.
<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 અને @HostListener directives તેમના host element સાથે ક્રિયાપ્રતિક્રિયા કરવા માટેના માનક સાધનો છે — વર્ગો/શૈલીઓ/લક્ષણો ઉમેરવા અને ઘોષણાત્મક રીતે ઇવેન્ટો પર પ્રતિક્રિયા આપવી, ElementRef.nativeElement ને મેન્યુયલ રીતે પકડ્યા વગર અને શ્રોતાઓને વાયર ન કર્યા.
તેઓ વધુપણે વર્તન નિર્દેશોને (highlight, tooltip, draggable, accessible widgets) સ્વચ્છ રીતે બનાવવા માટે જરૂરી છે, અને તેઓ સ્વતઃ પરિવર્તન શોધ અને શ્રોતા સાફટાઇ સંભાળે છે જે મેન્યુયલ DOM કોડને સંચાલન કરવું પડશે.