التوجيهات المخصصة
تُعد التوجيهات المخصصة (Custom Directives) في أنجولار من الأدوات القوية التي تمنح المطورين القدرة على توسيع وظائف مكونات واجهة المستخدم دون الحاجة إلى إنشاء مكونات جديدة بالكامل. التوجيهات في أنجولار هي فئات يمكنها التفاعل مع عناصر DOM وتعديل سلوكها أو مظهرها استناداً إلى منطق محدد. في التطبيقات الحديثة أحادية الصفحة (SPAs)، تُستخدم التوجيهات المخصصة لتطبيق منطق تفاعلي متكرر مثل التحقق من الصلاحيات، التحقق من صحة الإدخال، أو حتى إنشاء تأثيرات مرئية مخصصة.
من خلال التوجيهات المخصصة، يمكن للمطورين الحفاظ على نظافة الشيفرة وتقليل التكرار، مما يعزز قابلية الصيانة وإعادة الاستخدام. ترتبط التوجيهات ارتباطًا وثيقًا بمفاهيم أساسية في أنجولار مثل دورة حياة المكون (Lifecycle Hooks)، وإدارة الحالة (State Management)، وتدفق البيانات (Data Flow) بين المكونات.
في هذا الدرس، سيتعلم القارئ كيفية إنشاء وتطبيق التوجيهات المخصصة في أنجولار من الصفر، وفهم كيفية تفاعلها مع DOM والمكونات، وكيفية دمجها في تطبيقات حقيقية مع التركيز على الأداء الأمثل وتجنب الأخطاء الشائعة.
مثال أساسي
typescript// مثال أساسي على إنشاء توجيه مخصص في أنجولار لتغيير لون الخلفية عند مرور المؤشر
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
@Input('appHighlight') highlightColor: string = 'yellow';
constructor(private el: ElementRef) {}
@HostListener('mouseenter') onMouseEnter() {
this.highlight(this.highlightColor);
}
@HostListener('mouseleave') onMouseLeave() {
this.highlight('transparent');
}
private highlight(color: string) {
this.el.nativeElement.style.backgroundColor = color;
}
}
// استخدام التوجيه في مكون أنجولار
// app.component.html
// <p appHighlight="lightgreen">مرر المؤشر هنا لتجربة التوجيه المخصص!</p>في هذا المثال، قمنا بإنشاء توجيه مخصص يسمى HighlightDirective يسمح بتغيير لون خلفية العنصر عند مرور المؤشر عليه. يعتمد التوجيه على مفهوم "الحقن التبعي" (Dependency Injection) عبر ElementRef للوصول إلى العنصر في DOM والتعديل على خصائصه.
يُستخدم @Directive لتحديد التعريف الأساسي للتوجيه، مع محدد selector يُستخدم داخل HTML لتطبيق التوجيه على عناصر معينة. السمة @Input تتيح تمرير قيم ديناميكية من القالب (Template) إلى التوجيه، مما يزيد من مرونته وقابليته لإعادة الاستخدام.
تُستخدم @HostListener للاستماع لأحداث DOM مثل mouseenter وmouseleave، مما يجعل التوجيه يتفاعل مباشرة مع تفاعل المستخدم. هذا يعكس مفهوم تدفق البيانات في أنجولار حيث يمكن للمكونات والتوجيهات التفاعل بشكل متكامل ضمن دورة حياة التطبيق.
يُظهر هذا المثال أيضًا أهمية الحفاظ على الكفاءة ومنع إعادة التصيير (re-render) غير الضرورية من خلال تقييد منطق التفاعل داخل التوجيه نفسه بدلاً من مكونات متعددة، مما يحسن الأداء ويقلل من التعقيد في إدارة الحالة.
مثال عملي
typescriptimport { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
@Directive({
selector: '[appValidateInput]'
})
export class ValidateInputDirective {
constructor(private el: ElementRef, private renderer: Renderer2) {}
@HostListener('input') onInputChange() {
const value = this.el.nativeElement.value;
if (value && value.length < 3) {
this.renderer.setStyle(this.el.nativeElement, 'border', '2px solid red');
this.renderer.setAttribute(this.el.nativeElement, 'title', 'يجب أن يحتوي الإدخال على 3 أحرف على الأقل');
} else {
this.renderer.removeStyle(this.el.nativeElement, 'border');
this.renderer.removeAttribute(this.el.nativeElement, 'title');
}
}
}
// app.component.html
// <input type="text" appValidateInput placeholder="أدخل اسمك">أفضل الممارسات في أنجولار لتطوير التوجيهات المخصصة تتطلب فهماً عميقاً لتدفق البيانات بين المكونات وإدارة الحالة. يجب تجنب تغيير حالة المكونات الأب مباشرة داخل التوجيه، بل يجب استخدام مخرجات Events أو خدمات مشتركة (Shared Services) عند الحاجة للتفاعل بين التوجيهات والمكونات.
من الأخطاء الشائعة التي يقع فيها المطورون الجدد:
- تمرير الحالة بشكل متكرر بين المكونات (prop drilling) بدلاً من استخدام خدمة مشتركة.
- التعديل المباشر على عناصر DOM دون استخدام Renderer2 مما قد يسبب مشاكل في الأمان أو الأداء.
- استخدام التوجيهات لمعالجة منطق معقد بدلاً من المكونات، مما يخل بمبدأ الفصل بين العرض والمنطق.
نصائح للأداء والتحسين تشمل تقليل الاشتراكات غير الضرورية داخل التوجيهات، وإلغاء الاشتراكات في دورة الحياة OnDestroy عند الحاجة. كما يُفضل اعتماد أسلوب الكسل (Lazy Loading) للتوجيهات عند استخدامها ضمن وحدات متعددة.
من ناحية الأمان، يجب التأكد من أن التوجيهات لا تُدخل أو تعدل محتوى HTML بشكل مباشر لتجنب هجمات XSS. استخدام Renderer2 بدلاً من innerHTML هو من الممارسات الأساسية للحماية.
📊 جدول مرجعي
| أنجولار Element/Concept | Description | Usage Example |
|---|---|---|
| @Directive | تُستخدم لتعريف التوجيه المخصص | @Directive({ selector: '[appCustom]' }) |
| ElementRef | تمكن من الوصول إلى العنصر في DOM | constructor(private el: ElementRef) {} |
| Renderer2 | واجهة آمنة للتعامل مع DOM | this.renderer.setStyle(this.el.nativeElement, 'color', 'red'); |
| @HostListener | تسمح بالاستماع إلى أحداث العنصر | @HostListener('click') onClick() { ... } |
| @Input | تمرير البيانات إلى التوجيه من المكون | @Input('appCustom') color: string; |
| Lifecycle Hooks | تتعامل مع مراحل حياة التوجيه | ngOnInit(), ngOnDestroy() |
في ختام هذا الدرس، يمكن القول إن التوجيهات المخصصة في أنجولار تمثل أداة قوية ومرنة لتوسيع وظائف المكونات وإضافة سلوكيات تفاعلية قابلة لإعادة الاستخدام عبر التطبيق. تعلم استخدامها يفتح الباب لبناء تطبيقات أكثر نظافة وكفاءة.
لقد تعلمت في هذا الدرس كيفية إنشاء توجيه بسيط يتفاعل مع المستخدم عبر الأحداث، وتوجيه أكثر تعقيداً للتعامل مع التحقق من البيانات. كما تعرفت على أفضل الممارسات لتفادي الأخطاء الشائعة مثل التكرار غير الضروري وإدارة الحالة غير الفعالة.
الخطوات التالية المقترحة تشمل دراسة التوجيهات البنيوية (Structural Directives) مثل ngIf و ngFor، والتعمق في مفاهيم دورة حياة المكونات (Lifecycle) وخدمات أنجولار (Services). كما يُنصح بدمج التوجيهات المخصصة في تطبيقات حقيقية لمعالجة سيناريوهات مثل التحقق من صلاحيات المستخدم أو تحسين تجربة المستخدم (UX).
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى