كيفية بناء توجيهات مخصصة في الزاوي

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

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

التوجيهات هي رموز مخصصة تستخدمها Angular لتعديل سلوك أو مظهر عنصر HTML. يمكنك استخدام التوجيهات لإضافة مستمعي الأحداث أو تغيير DOM أو إظهار العناصر أو إخفائها.

هناك نوعان من التوجيهات المضمنة في الزاويوالهيكلية والسمة. تغير التوجيهات الهيكلية بنية DOM، بينما تغير توجيهات السمات مظهر العنصر أو سلوكه. تعد التوجيهات طريقة قوية لتوسيع وظائف المكونات Angular.

فوائد التوجيهات

فيما يلي بعض فوائد استخدام التوجيهات في Angular:

• قابلية إعادة الاستخدام: يمكنك استخدام التوجيهات في مكونات متعددة، مما يوفر عليك الوقت والجهد.
• القابلية للتوسعة: يمكنك توسيع التوجيهات لإضافة وظائف جديدة، مما يجعل مكوناتك أكثر قوة.
• المرونة: باستخدام التوجيهات، يمكنك تعديل سلوك العنصر أو مظهره بطرق مختلفة، مما يمنحك قدرًا كبيرًا من المرونة عند إنشاء تطبيقاتك.

إعداد التطبيق الزاوي الخاص بك

لإعداد تطبيق Angular، قم بتثبيت Angular CLI عن طريق تشغيل الكود التالي في جهازك الطرفي:

npm install -g @angular/cli

بعد تثبيت Angular CLI، قم بإنشاء مشروع Angular عن طريق تشغيل الأمر التالي:

ng new custom-directives-app

سيؤدي تشغيل الأمر أعلاه إلى إنشاء مشروع Angular اسمه تطبيق التوجيهات المخصصة.

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

الآن لديك مشروع Angular ويمكنك البدء في إنشاء توجيهاتك المخصصة. قم بإنشاء ملف TypeScript وحدد فئة مزينة بامتداد @التوجيه مصمم ديكور.

ال @التوجيه الديكور هو مصمم ديكور TypeScript يستخدم لإنشاء توجيهات مخصصة. الآن قم بإنشاء Highlight.directive.ts الملف في src/app الدليل. في هذا الملف، ستقوم بإنشاء التوجيه المخصص تسليط الضوء.

على سبيل المثال:

import { Directive } from"@angular/core";
@Directive({
 selector: "[myHighlight]",
})
exportclassHighlightDirective{
constructor() {}
}

تستورد كتلة التعليمات البرمجية أعلاه ملف التوجيه مصمم ديكور من @ الزاوي/الأساسية وحدة. ال @التوجيه مصمم الديكور يزين HighlightDirective فصل. يأخذ كائنًا كوسيطة مع a محدد ملكية.

في هذه الحالة، قمت بتعيين محدد الملكية ل [تسليط الضوء] مما يعني أنه يمكنك تطبيق هذا التوجيه على القوالب الخاصة بك عن طريق إضافة ملف myHighlight صفة لعنصر.

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

Some text</p>
</main>

إضافة السلوك إلى التوجيه

لقد قمت الآن بإنشاء توجيه بنجاح. الخطوة التالية هي إضافة سلوك إلى التوجيه حتى يتمكن من التعامل مع DOM. سوف تحتاج إلى مرجع العنصر من @angular/core لإضافة سلوك إلى التوجيه.

سوف تقوم بإدخال ElementRef في مُنشئ التوجيه. ElementRef عبارة عن غلاف حول عنصر أصلي داخل طريقة العرض.

فيما يلي مثال لكيفية إضافة سلوك إلى التوجيه:

import { Directive, ElementRef } from"@angular/core";
@Directive({
 selector: "[myHighlight]"
})
exportclassHighlightDirective{
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor = 'lightblue';
 }
}

في هذا المثال، منشئ HighlightDirective تأخذ الفئة معلمة ElementRef، والتي يقوم Angular بإدخالها تلقائيًا. يوفر ElementRef الوصول إلى عنصر DOM الأساسي.

استخدام this.element.nativeElement الخاصية، يمكنك الوصول إلى عنصر DOM الأصلي لـ عنصر معامل. يمكنك بعد ذلك تعيين لون خلفية المكون على com.lightblue باستخدام أسلوب ملكية. هذا يعني أنه مهما كان العنصر الذي تقوم بتطبيقه myHighlight التوجيه سيكون له خلفية زرقاء فاتحة.

لجعل التوجيه فعالاً، تأكد من استيراده والإعلان عنه في ملف app.module.ts ملف.

على سبيل المثال:

import { NgModule } from'@angular/core';
import { BrowserModule } from'@angular/platform-browser';
import { AppRoutingModule } from'./app-routing.module';
import { AppComponent } from'./app.component';
import { HighlightDirective } from'./highlight.directive';
@NgModule({
 declarations: [
 AppComponent,
 HighlightDirective,
 ],
 imports: [
 BrowserModule,
 AppRoutingModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
exportclassAppModule{ }

يمكنك الآن تطبيق توجيه myHighlight على العناصر في مكونات Angular الخاصة بك.

Some text</p>
</main>

قم بتشغيل التطبيق الخاص بك على خادم التطوير لاختبار ما إذا كان التوجيه فعالاً. يمكنك القيام بذلك عن طريق تشغيل الأمر التالي في جهازك الطرفي:

ng serve

بعد تشغيل الأمر، انتقل إلى http://localhost: 4200/ على متصفح الويب الخاص بك، وسترى واجهة تشبه الصورة أدناه.

تقبل التوجيهات الزاوية المضمنة القيم لتغيير مظهر العنصر، ولكن التوجيه المخصص myHighlight لا. يمكنك تكوين التوجيه لقبول القيمة التي سيستخدمها لتعيين لون خلفية القالب ديناميكيًا.

للقيام بذلك، استبدل الكود الموجود في Highlight.directive.ts ملف بهذا:

import { Directive, ElementRef, Input } from"@angular/core";
@Directive({
 selector: "[myHighlight]"
})
exportclassHighlightDirective{
 @Input() set myHighlight(color: string) {
this.element.nativeElement.style.backgroundColor = color;
 }
constructor(private element: ElementRef) { 
 }
}

في كتلة التعليمات البرمجية أعلاه، HighlightDirective تحتوي الفئة على طريقة ضبط تسمى myHighlight. تستغرق هذه الطريقة أ لون معلمة سلسلة النوع يمكنك تزيين طريقة الضبط باستخدام @مدخل الديكور، مما يسمح لك بتمرير قيمة اللون إلى التوجيه من المكون الأصلي.

يمكنك الآن تحديد لون الخلفية عن طريق تمرير قيمة إلى توجيه myHighlight.

على سبيل المثال:

'pink'>Some text</p>
</main>

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

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

يوفر Angular توجيهين هيكليين، ngFor و ngIf. التوجيه ngFor يعرض قالبًا لكل عنصر في مجموعة (مصفوفة)، بينما ngIf يعالج العرض الشرطي.

في هذا القسم، ستقوم بإنشاء توجيه هيكلي مخصص يعمل مثل ngIf التوجيه. للقيام بذلك، قم بإنشاء condition.directive.ts ملف.

في ال condition.directive.ts في الملف اكتب هذا الكود :

import { Directive, Input, TemplateRef, ViewContainerRef } from'@angular/core'
@Directive({
 selector: "[condition]"
})
exportclassConditionDirective{
 @Input() set condition(arg: boolean) {
if(arg) {
this.viewContainer.createEmbeddedView(this.template)
 } else {
this.viewContainer.clear();
 }
 }
constructor(
 private template: TemplateRef, 
 private viewContainer: ViewContainerRef 
 ) {}
}

تسمح لك كتلة التعليمات البرمجية هذه بعرض العناصر بشكل مشروط من خلال تطبيق حالة التوجيه إلى عنصر وتمرير قيمة منطقية من المكون الأصلي.

في منشئ ConditionDirective الطبقة، يمكنك حقن مثيل ل مرجع القالب و عرض الحاويةالمرجع. يمثل TemplateRef القالب المرتبط بالتوجيه، ويمثل ViewContainerRef الحاوية التي يعرض فيها التطبيق طرق العرض.

يستخدم أسلوب محدد فئة ConditionDirective عبارة if else للتحقق من المعلمة arg. يقوم التوجيه بإنشاء عرض مضمن باستخدام القالب المقدم إذا كانت المعلمة صحيحة. ال createEmbeddedView تقوم طريقة فئة ViewContainerRef بإنشاء العرض وعرضه في DOM.

إذا كانت المعلمة خطأ شنيع، يقوم التوجيه بمسح حاوية العرض باستخدام واضح طريقة فئة ViewContainerRef. يؤدي هذا إلى إزالة أي طرق عرض تم تقديمها مسبقًا من DOM.

بعد إنشاء التوجيه، قم بتسجيله في مشروعك عن طريق استيراده والإعلان عنه في ملف app.module.ts ملف. بعد القيام بذلك، يمكنك البدء في استخدام التوجيه في القوالب الخاصة بك.

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

"true">Hello There!!!</p>
</main>

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

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