| وجه المقارنة المعمارية | مزخرف الاستماع للأحداث (HostListener) | مزخرف ربط الخصائص (HostBinding) |
|---|---|---|
| الهدف والوظيفة الأساسية | الاستماع لأحداث المتصفح الصادرة عن العنصر المضيف والتفاعل معها برمجياً | ربط متغيرات صنف التوجيه بخصائص أو سمات العنصر المضيف لتحديثها تلقائياً |
| اتجاه تدفق البيانات والتأثير | من العنصر المضيف (DOM) صعوداً إلى صنف التوجيه (Inbound Events) | من صنف التوجيه نزولاً لتعديل خصائص المكون أو العنصر المضيف (Outbound Properties) |
| طريقة الاستخدام البرمجية | @HostListener('event') methodName() | @HostBinding('attr.name') propertyName = value |
ربط خصائص العنصر المضيف ديناميكياً (@HostBinding). بعد أن تعلمنا في الدرس السابق كيف نستمع للأحداث القادمة من العنصر المضيف باستخدام HostListener، يأتي دور التحكم العكسي والمكمل لذلك؛ ألا وهو تعديل وربط خصائص، سمات، أو أنماط العنصر المضيف مباشرة من داخل صنف التوجيه باستخدام مزخرف @HostBinding بمرونة واحترافية تامة.
يتيح لك @HostBinding ربط أي متغير يتم تعريفه داخل صنف التوجيه بأي خاصية (مثل className, id, style.backgroundColor) أو سمة (مثل aria-expanded, disabled) تخص العنصر الحاضن (المضيف) الذي وُضع عليه التوجيه. عندما يتغير قيمة المتغير داخل الصنف، تقوم أنجولر بتحديث العنصر في واجهة المستخدم تلقائياً وبأعلى كفاءة أداء.
في التطبيقات الواقعية المتقدمة، غالباً ما يتم دمج الاثنين معاً؛ حيث يستمع HostListener لتفاعل المستخدم (مثل الضغط أو التحويم)، ثم يقوم بتحديث متغير مرتبط عبر HostBinding لتغيير مظهر العنصر المضيف لحظياً دون الحاجة لكتابة أكواد معقدة للوصول المباشر للـ DOM.
| 1 | import { Directive, HostBinding, HostListener } from '@angular/core'; |
| 2 | |
| 3 | @Directive({ |
| 4 | selector: '[appDynamicThemeStyler]', |
| 5 | standalone: true |
| 6 | }) |
| 7 | export class DynamicThemeStylerDirective { |
| 8 | // ربط صنف الـ CSS الخاص بالعنصر المضيف بمتغير داخل التوجيه |
| 9 | @HostBinding('class.active-theme-card') isCardActive = false; |
| 10 | |
| 11 | // ربط خاصية الـ style المباشرة لتغيير لون الإطار الخارجي |
| 12 | @HostBinding('style.border-color') borderColor = '#334155'; |
| 13 | |
| 14 | // ربط سمة الـ aria-pressed لإمكانية الوصول (Accessibility) |
| 15 | @HostBinding('attr.aria-pressed') get ariaPressed() { |
| 16 | return this.isCardActive ? 'true' : 'false'; |
| 17 | } |
| 18 | |
| 19 | // الاستماع لحدث النقر لتبديل الحالة عبر HostBinding |
| 20 | @HostListener('click') toggleThemeState() { |
| 21 | this.isCardActive = !this.isCardActive; |
| 22 | |
| 23 | // تغيير لون الإطار بناءً على الحالة الجديدة |
| 24 | this.borderColor = this.isCardActive ? '#0ea5e9' : '#334155'; |
| 25 | } |
| 26 | } |
| 1 | import { Component } from '@angular/core'; |
| 2 | import { DynamicThemeStylerDirective } from './dynamic-theme-styler.directive'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-host-binding-demo', |
| 6 | standalone: true, |
| 7 | imports: [DynamicThemeStylerDirective], |
| 8 | template: ` |
| 9 | <div class="demo-master-container"> |
| 10 | <h3>شرح وتطبيق HostBinding في Angular 22.1</h3> |
| 11 | |
| 12 | <!-- عنصر المضيف الذي سيستجيب للنقر ويعدل خصائصه تلقائياً --> |
| 13 | <div appDynamicThemeStyler class="configurable-card"> |
| 14 | انقر فوق هذا الصندوق لمشاهدة كيف يقوم HostBinding بتعديل الأصناف، الأنماط، وسمات الـ DOM فورياً! |
| 15 | </div> |
| 16 | </div> |
| 17 | `, |
| 18 | styles: [` |
| 19 | .demo-master-container { background: #090d16; color: #fff; padding: 24px; border-radius: 12px; } |
| 20 | .configurable-card { background: #1e293b; color: #38bdf8; padding: 20px; border-radius: 8px; cursor: pointer; font-weight: bold; border: 2px solid #334155; transition: all 0.3s ease; } |
| 21 | |
| 22 | /* النمط الفعال الذي يتم تفعيله تلقائياً عبر HostBinding */ |
| 23 | .active-theme-card { background: #0f172a !important; color: #ffffff !important; box-shadow: 0 10px 25px -5px rgba(14, 165, 233, 0.4); } |
| 24 | `] |
| 25 | }) |
| 26 | export class HostBindingDemoComponent {} |