هذه المزخرفات تسمح لمدير التعليمات البرمجية أو المكون بمعالجة والاستجابة لـ عنصر المضيف — العنصر الذي يقع المدير عليه (أو عنصر جذر المكون الخاص به). يعيّن @HostBinding الخصائص/السمات على المضيف؛ @HostListener يستمع للأحداث عليه.
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding يربط بشكل تفاعلي فئة/نمط/سمة/خاصية على عنصر المضيف بحقل المكون — قم بتغيير الحقل وسيتم تحديث المضيف.
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 ومعاملات أخرى). معاً يسمحان لمدير التعليمات البرمجية بأن يكون مكتفياً ذاتياً بالكامل: فهو يستمع للأحداث على مضيفه وينقل بشكل تفاعلي مظهر المضيف.
<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 هي الأدوات القياسية لـ مديري التعليمات البرمجية للتفاعل مع عنصر المضيف — إضافة فئات/أنماط/سمات والاستجابة للأحداث بطريقة تصريحية، دون الحاجة إلى الوصول يدوياً إلى ElementRef.nativeElement وربط المستمعين.
هي ضرورية لبناء مديري السلوك القابل لإعادة الاستخدام (تسليط الضوء، تلميح أداة، قابل للسحب، عناصر واجهة المستخدم يمكن الوصول إليها) بنظافة، وهي تتعامل تلقائياً مع كشف التغييرات وتنظيف المستمعين الذي سيضطر رمز DOM اليدوي إلى إدارته.