التوجيهات المخصّصة في Angular

تتيح لكم التوجيهات توسيع HTML. يقدّم هذا الدرس التوجيهات المخصّصة وكيفية إنشاء توجيهاتكم الخاصة.

ما هو التوجيه؟

تغيّر التوجيهات مظهر عناصر DOM أو سلوكها. يوفّر Angular توجيهات مضمّنة مثل *ngIf و*ngFor.

أنواع التوجيهات

• توجيهات المكوّنات
• توجيهات السمات - تغيّر المظهر أو السلوك
• التوجيهات البنيوية - تغيّر التخطيط، مثل *ngIf

إنشاء توجيه سمة

أنشئوا توجيهًا باستخدام Angular CLI:

ng generate directive highlight

ng generate directive highlight

تطبيق التوجيه

استخدموا التوجيه كسمة في القالب:

<p appHighlight>Highlighted Text</p>

<p appHighlight>Highlighted Text</p>

منطق التوجيه

تحتوي التوجيهات على منطق يغيّر عناصر DOM. فعلى سبيل المثال، يمكنكم تعيين لون الخلفية ديناميكيًا.

constructor(private el: ElementRef) {
  this.el.nativeElement.style.backgroundColor = 'yellow';
}

مُزخرف @HostListener

استخدموا @HostListener للاستجابة للأحداث التي تقع على العناصر التي تستخدم توجيهكم:

@HostListener('mouseenter') onMouseEnter() {
  this.highlight('blue');
}

@Input() في التوجيهات

يتيح لكم @Input() تمرير البيانات إلى التوجيهات من القوالب:

@Input() defaultColor: string;

الملخص

لقد تعلّمتم كيفية إنشاء التوجيهات المخصّصة واستخدامها لتحسين تطبيقات Angular. أحسنتم!