70. روابط المضيف (Host Bindings) ومستمعي المضيف (Host Listeners)

بينما ترتبط HostBinding و HostListener بالتوجيهات، يمكن استخدامهما أيضاً مباشرة داخل فئة المكون لإدارة الخصائص والأحداث على عنصر المضيف للمكون (<app-my-component>).

1. @HostBinding (تعديل خصائص المضيف)

يُستخدم لإضافة فئات أو سمات أو أنماط برمجياً إلى وسم المكون المخصص نفسه.

مثال: تعيين سمة على عنصر المضيف لتحديد CSS.

typescript @Component({ selector: 'app-selectable-item', template: '...' }) export class SelectableItemComponent { isActive: boolean = false;

// ربط خاصية 'class.active' لعنصر المضيف @HostBinding('class.active') get activeClass() { return this.isActive; }

// ربط قيمة سمة @HostBinding('attr.role') role = 'button';

toggleActive() { this.isActive = !this.isActive; } }

إذا كانت isActive صحيحة، يصبح عنصر المضيف <app-selectable-item class="active">.

2. @HostListener (الاستماع لأحداث المضيف)

يُستخدم للاستماع للأحداث التي تحدث على عنصر المضيف، وهو مفيد للتفاعلات مثل السحب والإفلات أو اختصارات لوحة المفاتيح العامة.

مثال: الاستماع لحدث ضغطة مفتاح عام.

typescript @Component({ /* ... */ }) export class ShortcutComponent {

// الاستماع لحدث 'keydown' في أي مكان على النافذة @HostListener('window:keydown', ['$event']) handleKeydown(event: KeyboardEvent) { if (event.key === 'Escape') { console.log('Escape key pressed globally!'); // إغلاق نافذة مشروطة، على سبيل المثال } } }

تُعد مستمعات المضيف أداة مفيدة للغاية لإنشاء منطق واجهة مستخدم قابل لإعادة الاستخدام يتعلق بالماوس أو لوحة المفاتيح أو إدارة التركيز.