या सजावटीकरणांमुळे डायरेक्टिव किंवा घटक त्यांच्या host घटकाला (ज्या घटकावर डायरेक्टिव बसलेला आहे किंवा घटकाचा स्वतःचा रूट घटक) हाताळू शकतात आणि प्रतिक्रिया दर्शवू शकतात. @HostBinding होस्टवर गुणधर्म/विशेषता सेट करते; @HostListener त्यावर घटनांचे श्रवण करते.
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding प्रतिक्रियाशीलतेने host घटकावरील वर्ग/शैली/विशेषता/गुणधर्मांना घटक क्षेत्राशी बांधते — क्षेत्र बदला आणि host अद्यतन होतो.
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 host वरील DOM घटनेला सदस्यता घेते (आणि $event आणि इतर वाद प्राप्त करू शकते). एकत्रितपणे ते डायरेक्टिवला पूर्णपणे स्वतंत्र असायचे सक्षम करतात: ते त्याच्या host वर घटनांचे श्रवण करते आणि प्रतिक्रियाशीलतेने host चे स्वरूप अद्यतन करते.
<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 हे डायरेक्टिव्हसाठी त्यांच्या host घटकाशी संवाद साधण्याचे मानक साधन आहेत — वर्ग/शैली/विशेषता जोडून आणि घटनांना घोषणात्मकपणे प्रतिक्रिया दर्शवून, ElementRef.nativeElement हाताळून आणि श्रोते तारांची वायरिंग करणे आवश्यक नाही.
ते पुन्हा वापरल्या जाणाऱ्या वर्तन डायरेक्टिव्ह (हाइलाइट, टूलटिप, ड्रॅग करण्यायोग्य, सुलभ विजेट) स्वच्छपणे बांधण्यासाठी आवश्यक आहेत, आणि ते स्वयंचलितपणे परिवर्तन शोध आणि श्रोते सफाई हाताळतात जी व्यक्तिगत DOM कोडला व्यवस्थापित करावी लागेल.