| عنصر البناء البرمجي | الاسم في كود TypeScript | دور العنصر في هيكل التوجيه |
|---|---|---|
| مزخرف الصنف (Decorator) | @Directive() | يُخبر أنجولر أن هذا الصنف عبارة عن توجيه ويحدد selector الخاص به |
| محدد الاستهداف (Selector) | selector: '[appDirectiveName]' | الاسم البرمجي الذي يُستخدم لاستدعاء التوجيه داخل قوالب الـ HTML كسمة |
| محفظ الحقن (DI Injection) | inject(ElementRef) | الحصول على مرجع مباشر لعنصر الـ DOM الذي تم تطبيق التوجيه عليه |
نواصل رحلتنا في الفصل الثامن من المنهاج الهندسي لأحدث إصدارات Angular 22.1 مع الدرس الثاني: بناء وتطوير أول توجيه سمة مخصص (Custom Attribute Directive). بعد أن تعرفنا على أنواع التوجيهات في الدرس السابق، سنقوم اليوم بالعملي وبناء أول توجيه سمة خاص بك (Custom Attribute Directive) لتعديل سلوك عناصر واجهة المستخدم وإضافة تفاعلات برمجية نظيفة وقابلة لإعادة الاستخدام.
عند بناء توجيه سمة، يُفضل دائماً وضع اسم المحدد داخل أقواس مربعة (مثل [appCustomTooltip])، ليدل على أن هذا التوجيه يُستخدم كسمة مضافة لعناصر الـ HTML الموجودة مسبقاً.
عبر دالة inject(ElementRef) الحديثة في Angular 22.1، يستطيع التوجيه الوصول فوراً إلى العنصر الحاضن وتعديل خصائصه البصرية أو البرمجية دون الحاجة لكتابة كود معقد داخل المكونات الرئيسية.
| 1 | import { Directive, ElementRef, HostListener, inject } from '@angular/core'; |
| 2 | |
| 3 | @Directive({ |
| 4 | selector: '[appHoverEffect]', |
| 5 | standalone: true |
| 6 | }) |
| 7 | export class HoverEffectDirective { |
| 8 | private el = inject(ElementRef); |
| 9 | |
| 10 | constructor() { |
| 11 | this.el.nativeElement.style.transition = 'background-color 0.3s ease'; |
| 12 | } |
| 13 | |
| 14 | // الاستجابة لحدث دخول مؤشر الفأرة |
| 15 | @HostListener('mouseenter') onMouseEnter() { |
| 16 | this.el.nativeElement.style.backgroundColor = '#0ea5e9'; |
| 17 | this.el.nativeElement.style.color = '#ffffff'; |
| 18 | } |
| 19 | |
| 20 | // الاستجابة لحدث خروج مؤشر الفأرة |
| 21 | @HostListener('mouseleave') onMouseLeave() { |
| 22 | this.el.nativeElement.style.backgroundColor = '#1e293b'; |
| 23 | this.el.nativeElement.style.color = '#38bdf8'; |
| 24 | } |
| 25 | } |
| 1 | import { Component } from '@angular/core'; |
| 2 | import { HoverEffectDirective } from './hover-effect.directive'; |
| 3 | |
| 4 | @Component({ |
| 5 | selector: 'app-custom-directive-demo', |
| 6 | standalone: true, |
| 7 | imports: [HoverEffectDirective], |
| 8 | template: ` |
| 9 | <div class="container"> |
| 10 | <h3>تطبيق توجيه السمة المخصص</h3> |
| 11 | |
| 12 | <!-- عنصر يحمل التوجيه المطور ويتفاعل مع الفأرة --> |
| 13 | <div appHoverEffect class="card-box"> |
| 14 | مرر مؤشر الفأرة فوق هذا العنصر لمشاهدة تأثير التوجيه المخصص! |
| 15 | </div> |
| 16 | </div> |
| 17 | `, |
| 18 | styles: [` |
| 19 | .container { background: #090d16; color: #fff; padding: 20px; border-radius: 10px; } |
| 20 | .card-box { background: #1e293b; color: #38bdf8; padding: 16px; border-radius: 8px; cursor: pointer; font-weight: bold; border: 1px solid #334155; } |
| 21 | `] |
| 22 | }) |
| 23 | export class CustomDirectiveDemoComponent {} |