كيفية استخدام وإنشاء توجيهات مخصصة في Angular

بعد اللعب مع Angular لفترة طويلة ، توصلت أخيرًا إلى شرح مفهوم لتوجيهات Angular. في هذه المقالة ، سوف نفهم أولاً ما هو التوجيه بالضبط وكيفية استخدامه في Angular. سننشئ توجيهاتنا المخصصة أيضًا. فما الذي ننتظره؟ دعونا نتعمق في ذلك.

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

التوجيهات هي الوظائف التي سيتم تنفيذها متى وجدها مترجم Angular . تعمل التوجيهات الزاويّة على تحسين قدرة عناصر HTML من خلال إرفاق سلوكيات مخصصة بـ DOM.

من المفهوم الأساسي ، يتم تصنيف توجيهات Angular إلى ثلاث فئات.

  1. توجيهات السمة
  2. التوجيهات الهيكلية
  3. مكونات

توجيهات السمة

تعتبر توجيهات السمات مسؤولة عن معالجة مظهر وسلوك عناصر DOM. يمكننا استخدام توجيهات السمات لتغيير نمط عناصر DOM. تُستخدم هذه التوجيهات أيضًا لإخفاء أو إظهار عناصر DOM معينة بشكل مشروط. يوفر Angular العديد من توجيهات السمات المضمنة مثل NgStyle و NgClass وما إلى ذلك. يمكننا أيضًا إنشاء توجيهات السمات المخصصة الخاصة بنا للوظائف المطلوبة.

التوجيهات الهيكلية

التوجيهات الهيكلية هي المسؤولة عن تغيير هيكل DOM. إنها تعمل عن طريق إضافة أو إزالة العناصر من DOM ، على عكس توجيهات السمات التي تغير مظهر العنصر وسلوكه.

يمكنك التمييز بسهولة بين التوجيه الهيكلي والتوجيه الخاص بالسمة من خلال النظر في بناء الجملة. يبدأ اسم التوجيه الإنشائي دائمًا بعلامة النجمة (*) ، بينما لا يحتوي توجيه السمة على أي بادئة. التوجيهات الإنشائية الثلاثة الأكثر شيوعًا التي توفرها Angular هي NgIf و NgFor و NgSwitch .

مكونات

المكونات هي توجيهات مع القوالب. الاختلاف الوحيد بين المكونات والنوعين الآخرين من التوجيهات هو النموذج. لا تحتوي توجيهات السمات والهيكلية على قوالب. لذلك ، يمكننا القول أن المكون هو نسخة أنظف من التوجيه مع قالب ، وهو أسهل في الاستخدام.

استخدام التوجيهات الزاويّة المدمجة

هناك الكثير من التوجيهات المضمنة المتوفرة في Angular والتي يمكنك استخدامها بسهولة. في هذا القسم ، سوف نستخدم توجيهين مضمنين بسيطين للغاية.

توجيه NgStyle هو توجيه خاص بالخاصية يستخدم لتغيير تصميم أي عنصر DOM على أساس بعض الشروط.

 I am an Attribute Directive
في مقتطف الشفرة أعلاه ، نضيف خلفية زرقاء إذا كانت قيمة isBlueالمتغير صحيحة. إذا كانت قيمة isBlueالمتغير خاطئة ، فستكون خلفية العنصر أعلاه باللون الأحمر.

NgIf التوجيه هو توجيه هيكلي يستخدم لإضافة عناصر إلى DOM وفقًا لبعض الشروط.

I am a Structural Directive
في مقتطف الشفرة أعلاه ، ستبقى الفقرة بأكملها في DOM إذا كانت قيمة showالمتغير صحيحة ، وإلا فإنها ستنطلق من DOM.

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

إن إنشاء توجيه مخصص يشبه تمامًا إنشاء مكون Angular. لإنشاء توجيه مخصص ، يتعين علينا استبدال @Componentالمصمم @Directiveبديكور.

لذا ، فلنبدأ في إنشاء أول توجيه خاص بالسمة المخصصة. في هذا التوجيه ، سنقوم بتمييز عنصر DOM المحدد عن طريق تعيين لون خلفية العنصر.

أنشئ app-highlight.directive.tsملفًا في src/appمجلد وأضف مقتطف الشفرة أدناه.

import { Directive, ElementRef } from '@angular/core';
@Directive({
 selector: '[appHighlight]'
})
export class HighlightDirective {
 constructor(private eleRef: ElementRef) {
 eleRef.nativeElement.style.background = 'red';
 }
}

هنا، ونحن استيراد Directiveو ElementRefمن قلب الزاوي. و Directiveيوفر وظائف @Directiveالديكور التي نقدمها محدد ممتلكاتها إلى appHighLightحتى نتمكن من استخدام هذا في أي مكان محدد في التطبيق. نقوم أيضًا باستيراد العنصر ElementRefالمسؤول عن الوصول إلى عنصر DOM.

الآن لكي يعمل appHighlightالتوجيه ، نحتاج إلى إضافة التوجيه الخاص بنا إلى مصفوفة الإعلانات في app.module.tsالملف.

import ...;
import { ChangeThemeDirective } from './app-highlight.directive';
@NgModule({
declarations: [
AppComponent,
ChangeThemeDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

الآن سنستخدم التوجيه المخصص الذي أنشأناه حديثًا. أقوم بإضافة appHightlightالتوجيه في app.component.htmlولكن يمكنك استخدامه في أي مكان في التطبيق.

Highlight Me !

سيبدو إخراج مقتطف الشفرة أعلاه بهذا الشكل.

إنشاء توجيه هيكلي مخصص

في القسم السابق ، أنشأنا توجيه السمة الأول. يتم استخدام نفس الأسلوب لإنشاء التوجيه الهيكلي أيضًا.

لذا ، فلنبدأ في إنشاء التوجيه الهيكلي. في هذا التوجيه ، سنقوم بتنفيذ *appNotالتوجيه الذي سيعمل عكسًا تمامًا *ngIf.

الآن قم بإنشاء app-not.directive.tsملف في src/appالمجلد وأضف الكود أدناه.

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
 selector: '[appNot]'
})
export class AppNotDirective {
constructor(
 private templateRef: TemplateRef,
 private viewContainer: ViewContainerRef) { }
 @Input() set appNot(condition: boolean) {
 if (!condition) {
 this.viewContainer.createEmbeddedView(this.templateRef);
 } else {
 this.viewContainer.clear(); }
 }
}

كما رأيت في مقتطف الشفرة أعلاه ، نحن نستورد Directive, Input, TemplateRef and ViewContainerRefمن@angular/core.

Directiveيوفر نفس الوظيفة @Directiveلمصمم الديكور. يستخدم Inputالمصمم للتواصل بين المكونين. يرسل البيانات من مكون إلى آخر باستخدام خاصية ربط.

TemplateRefيمثل القالب المضمن الذي يتم استخدامه لإنشاء مثيل للعروض المضمنة. ترتبط طرق العرض المضمنة هذه بالقالب الذي سيتم عرضه.

ViewContainerRefعبارة عن حاوية حيث يمكن إرفاق عرض واحد أو أكثر. يمكننا استخدام createEmbeddedView()الوظيفة لإرفاق القوالب المضمنة في الحاوية.

الآن لكي تعمل appNotالتعليمة ، نحتاج إلى إضافة التوجيه الخاص بنا إلى مصفوفة الإعلانات في app.module.tsالملف.

import ...;
import { AppNotDirective } from './app-not.directive';
@NgModule({
declarations: [
AppComponent,
AppNotDirective
],
imports: [
...
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

الآن ، حان الوقت لاستخدام التوجيه الهيكلي المنشأ حديثًا.

أقوم بإضافة appNotالتوجيه في app.component.htmlولكن يمكنك استخدامه في أي مكان في التطبيق.

True
False

و *appNotتم تصميم التوجيه بطريقة فإنه يلحق العنصر القالب في DOM إذا كانت *appNotالقيمة هي falseفقط مقابل *ngIfالتوجيه.

سيبدو إخراج مقتطف الشفرة أعلاه بهذا الشكل.

آمل أن يكون هذا المقال قد أجاب على معظم أسئلتك المتعلقة بتوجيهات Angular. إذا كانت لديك أي استفسارات أو شكوك ، فلا تتردد في التواصل معي في مربع التعليقات.