62. التوجيهات المخصصة (الهيكلية والسمات)

لقد استخدمنا توجيهات مدمجة مثل NgIf و NgClass. الآن نتعلم كيفية إنشاء توجيهاتنا الخاصة لتجريد معالجة DOM الشائعة أو منطق واجهة المستخدم.

1. توجيهات السمات المخصصة

تغير توجيهات السمات مظهر أو سلوك عنصر موجود.

مثال: توجيه التمييز (Highlight Directive)

typescript // highlight.directive.ts import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({ selector: '[appHighlight]' // المُحدِّد المستخدم في HTML:

}) export class HighlightDirective {

// خاصية إدخال لتعيين اللون ديناميكياً @Input('appHighlight') highlightColor: string = 'yellow';

constructor(private el: ElementRef) { }

// استخدام HostListener للاستماع إلى الأحداث على العنصر المضيف @HostListener('mouseenter') onMouseEnter() { this.highlight(this.highlightColor); }

@HostListener('mouseleave') onMouseLeave() { this.highlight(''); }

private highlight(color: string) { this.el.nativeElement.style.backgroundColor = color; } }

الاستخدام:

html

Hover over this text.

2. توجيهات الهيكلة المخصصة

تُعدل توجيهات الهيكلة (*) هيكل DOM، وتتطلب تفاعلاً مع TemplateRef و ViewContainerRef.

سنخصص الدرس التالي لبناء توجيه هيكلي مخصص (شبيه بـ *NgIf) لأنه أكثر تعقيداً بكثير.