| طريقة التقاط الأحداث | مكان التطبيق (الموقع) | الاستخدام الهندسي الأمثل |
|---|---|---|
| ربط الأحداث المباشر في القالب ((click)) | مباشرة داخل قالب HTML الخاص بالمكون | الأحداث البسيطة والخاصة بمكون واحد فقط |
| مزخرف HostListener داخل التوجيه | داخل صنف التوجيه (Directive Class) بكتابة برمجية نظيفة | إضافة سلوก تفاعلي قابل لإعادة الاستخدام عبر عدة عناصر ومكونات |
| الوصول المباشر لكائن النافذة (window/document) | داخل الصنف باستخدام كائنات المتصفح العامة | الاستماع لأحداث عامة مثل التمرير (scroll) أو تغيير حجم النافذة (resize) |
نصل في المنهاج الهندسي لأحدث إصدارات Angular 22.1 إلى الدرس الرابع: الاستجابة لتفاعلات المستخدم داخل التوجيهات (HostListener). عندما تقوم بتطوير توجيه مخصص لتعديل سلوك عنصر ما، فإنك غالباً تحتاج إلى الاستجابة لأحداث المتصفح مثل النقر، التحويم، تغيير الحجم، أو الكتابة لوحة المفاتيح. مزخرف HostListener هو الأداة المعمارية المصممة خصيصاً داخل أنجولر لربط هذه الأحداث بأمان وسهولة داخل صنف التوجيه.
بدلاً من كتابة مستمعات أحداث جافاسكريبت يدوية (addEventListener) وإدارتها، يتيح لك @HostListener('eventName') ربط الحدث بدالة برمجية داخل التوجيه مباشرة، مع التكفل التام بإلغاء التسجيل وتجنب تسرب الذاكرة (Memory Leaks).
يمكن للدالة المستجابة للحدث استقبال كائن الحدث ($event) أو استخدام الدوال البرمجية لمنع السلوك الافتراضي (preventDefault) بكل مرونة.
| 1 | import { Directive, ElementRef, HostListener, Renderer2, inject } from '@angular/core'; |
| 2 | |
| 3 | @Directive({ |
| 4 | selector: '[appInteractiveBehavior]', |
| 5 | standalone: true |
| 6 | }) |
| 7 | export class InteractiveBehaviorDirective { |
| 8 | private el = inject(ElementRef); |
| 9 | private renderer = inject(Renderer2); |
| 10 | |
| 11 | // الاستماع لحدث دخول الفأرة |
| 12 | @HostListener('mouseenter') onMouseEnter() { |
| 13 | this.renderer.setStyle(this.el.nativeElement, 'transform', 'scale(1.02)'); |
| 14 | this.renderer.setStyle(this.el.nativeElement, 'box-shadow', '0 10px 15px -3px rgba(14, 165, 233, 0.3)'); |
| 15 | } |
| 16 | |
| 17 | // الاستماع لحدث خروج الفأرة |
| 18 | @HostListener('mouseleave') onMouseLeave() { |
| 19 | this.renderer.removeStyle(this.el.nativeElement, 'transform'); |
| 20 | this.renderer.removeStyle(this.el.nativeElement, 'box-shadow'); |
| 21 | } |
| 22 | |
| 23 | // الاستماع لحدث النقر المزدوج |
| 24 | @HostListener('dblclick') onDoubleCliCk() { |
| 25 | alert('تم رصد النقر المزدوج بنجاح عبر HostListener في Angular 22.1!'); |
| 26 | } |
| 27 | } |
| 1 | import { Component } from '@angular/core'; |
| 2 | import { InteractiveBehaviorDirective } from './interactive-behavior.directive'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-host-listener-demo', |
| 6 | standalone: true, |
| 7 | imports: [InteractiveBehaviorDirective], |
| 8 | template: ` |
| 9 | <div class="demo-wrapper"> |
| 10 | <h3>الاستجابة للتفاعلات عبر HostListener</h3> |
| 11 | |
| 12 | <!-- عنصر يحمل التوجيه التفاعلي الجديد --> |
| 13 | <div appInteractiveBehavior class="interactive-card"> |
| 14 | قم بالمرور بالمؤشر فوق هذا الصندوق، أو انقر نقراً مزدوجاً لمشاهدة التفاعل! |
| 15 | </div> |
| 16 | </div> |
| 17 | `, |
| 18 | styles: [` |
| 19 | .demo-wrapper { background: #090d16; color: #fff; padding: 20px; border-radius: 10px; } |
| 20 | .interactive-card { background: #1e293b; color: #38bdf8; padding: 20px; border-radius: 8px; cursor: pointer; font-weight: bold; border: 1px solid #334155; transition: all 0.2s ease-in-out; text-align: center; } |
| 21 | `] |
| 22 | }) |
| 23 | export class HostListenerDemoComponent {} |