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

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

ما هي المبادئ التوجيهية؟

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

هناك نوعان من التوجيهات المضمنة في Angular والهيكلية والسمة. تغير التوجيهات الهيكلية بنية 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]",
})
export class HighlightDirective {
  constructor() {}
}

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

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

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

<main>
<p myHighlight>Some text</p>
</main>

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

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

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

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

import { Directive, ElementRef } from "@angular/core";

@Directive({
    selector: "[myHighlight]"
})
export class HighlightDirective {
    constructor(private element: ElementRef) {
        this.element.nativeElement.style.backgroundColor = 'lightblue';
    }
}

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

استخدام this.element.nativeElement الخاصية، يمكنك الوصول إلى عنصر DOM الأصلي لـ عنصر المعلمة. ثم تقوم بتعيين لون خلفية المكون إلى أزرق فاتح باستخدام أسلوب ملكية. هذا يعني أنه مهما كان العنصر الذي تقوم بتطبيقه 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]
})
export class AppModule { }

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

<main>
<p myHighlight>Some text</p>
</main>

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

ng serve

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

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

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

import { Directive, ElementRef, Input } from "@angular/core";

@Directive({
    selector: "[myHighlight]"
})

export class HighlightDirective {
    @Input() set myHighlight(color: string) {
        this.element.nativeElement.style.backgroundColor = color;
    }

    constructor(private element: ElementRef) {
    }
}

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

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

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

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

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

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

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

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

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

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'

@Directive({
    selector: "[condition]"
})

export class ConditionDirective {

    @Input() set condition(arg: boolean) {
        if(arg) {
            this.viewContainer.createEmbeddedView(this.template)
        } else {
            this.viewContainer.clear();
        }
    }

    constructor(
private template: TemplateRef<unknown>,
private viewContainer: ViewContainerRef
) {}
}

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

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

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

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

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

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

<main>
<p *condition="true">Hello There!!!</p>
</main>

الآن يمكنك إنشاء إرشادات مخصصة

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