نحوه ساخت دستورالعمل های سفارشی در Angular

دستورالعمل های سفارشی Angular یک مکانیسم قوی برای اصلاح DOM و ترکیب رفتار پویا در قالب های شما ارائه می دهد.

یکی از ویژگی های کلیدی Angular دستورات است. دستورالعمل های زاویه ای راهی برای اضافه کردن رفتار به عناصر DOM هستند. Angular انواع دستورالعمل های داخلی را ارائه می دهد، و همچنین می توانید دستورالعمل های سفارشی را در این چارچوب قوی ایجاد کنید.

دستورالعمل ها چیست؟

دستورالعمل ها کدهای سفارشی هستند که Angular برای تغییر رفتار یا ظاهر یک عنصر HTML استفاده می کند. می توانید از دستورالعمل ها برای اضافه کردن شنوندگان رویداد، تغییر DOM یا نمایش یا پنهان کردن عناصر استفاده کنید.

دو نوع دستورالعمل داخلی در Angular وجود دارد، ساختاری و ویژگی. دستورالعمل های ساختاری ساختار DOM را تغییر می دهند، در حالی که دستورالعمل های ویژگی ظاهر یا رفتار یک عنصر را تغییر می دهند. دستورالعمل ها یک راه قدرتمند برای گسترش عملکرد اجزای Angular هستند.

مزایای دستورالعمل ها

در اینجا برخی از مزایای استفاده از دستورالعمل ها در Angular آورده شده است:

• قابلیت استفاده مجدد: می توانید از دستورالعمل ها در چندین مؤلفه استفاده کنید و در وقت و تلاش خود صرفه جویی کنید.
• توسعه پذیری: می توانید دستورالعمل ها را برای افزودن عملکردهای جدید گسترش دهید و اجزای خود را قدرتمندتر کنید.
• انعطاف‌پذیری: با استفاده از دستورالعمل‌ها، می‌توانید رفتار یا ظاهر یک عنصر را به روش‌های مختلف تغییر دهید و در هنگام ساخت برنامه‌های خود انعطاف‌پذیری زیادی به شما می‌دهد.

راه اندازی برنامه Angular شما

برای راه اندازی یک برنامه Angular، Angular CLI را با اجرای کد زیر در ترمینال خود نصب کنید:

npm install -g @angular/cli

پس از نصب Angular CLI، با اجرای دستور زیر یک پروژه Angular ایجاد کنید:

ng new custom-directives-app

با اجرای دستور بالا یک پروژه Angular با نام custom-directives-app ایجاد می شود.

ایجاد یک دستورالعمل سفارشی

اکنون شما یک پروژه Angular دارید و می توانید شروع به ایجاد دستورالعمل های سفارشی خود کنید. یک فایل TypeScript ایجاد کنید و یک کلاس تزئین شده با دکوراتور @Directive تعریف کنید.

دکوراتور @Directive یک دکوراتور TypeScript است که برای ایجاد دستورالعمل های سفارشی استفاده می شود. حالا یک فایل highlight.directive.ts در دایرکتوری src/app ایجاد کنید. در این فایل، هایلایت سفارشی Directive را ایجاد می کنید.

مثلا:

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

@Directive({
  selector: "[myHighlight]",
})
export class HighlightDirective {
  constructor() {}
}

بلوک کد بالا، دکوراتور Directive را از ماژول @angular/core وارد می کند. دکوراتور @Directive کلاس HighlightDirective را تزئین می کند. یک شی را به عنوان آرگومان با خاصیت انتخابگر می گیرد.

در این حالت، ویژگی انتخابگر را روی [myHighlight] تنظیم می‌کنید، به این معنی که می‌توانید با افزودن ویژگی myHighlight به یک عنصر، این دستورالعمل را در قالب‌های خود اعمال کنید.

در اینجا مثالی از نحوه استفاده از دستورالعمل در قالب های خود آورده شده است:

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

افزودن رفتار به بخشنامه

اکنون شما با موفقیت یک دستورالعمل ایجاد کرده اید. مرحله بعدی اضافه کردن یک رفتار به دستورالعمل است تا بتواند DOM را دستکاری کند. برای افزودن یک رفتار به یک دستورالعمل، به ElementRef از @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 زیرین را فراهم می کند.

با استفاده از این ویژگی.element.nativeElement، به عنصر DOM اصلی پارامتر عنصر دسترسی دارید. سپس رنگ پس‌زمینه مولفه را با استفاده از ویژگی style روی آبی روشن تنظیم می‌کنید. این بدان معناست که هر عنصری که دستور 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

پس از اجرای دستور، در مرورگر وب خود به آدرس http://localhost:4200/ بروید و یک رابط شبیه به تصویر زیر را مشاهده خواهید کرد.

دستورالعمل های داخلی زاویه ای مقادیری را برای تغییر ظاهر عنصر می پذیرند، اما دستور سفارشی 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 است. این روش یک پارامتر رنگی از نوع رشته را می گیرد. شما روش تنظیم را با دکوراتور @Input تزئین می‌کنید، که به شما امکان می‌دهد مقدار رنگ را از مولفه اصلی به دستورالعمل منتقل کنید.

اکنون می توانید رنگ پس زمینه را با ارسال یک مقدار به دستور myHighlight تعیین کنید.

مثلا:

<main>
 <p 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]"
})

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 
 ) {}
}

این بلوک کد به شما اجازه می دهد تا با اعمال دستور شرط به یک عنصر و ارسال یک مقدار بولی از مولفه والد، عناصر را به صورت شرطی رندر کنید.

در سازنده کلاس ConditionDirective، نمونه ای از TemplateRef و ViewContainerRef را تزریق می کنید. TemplateRef نشان دهنده الگوی مرتبط با دستورالعمل است و ViewContainerRef نشان دهنده ظرفی است که برنامه در آن نماها را ارائه می دهد.

متد تنظیم کننده کلاس ConditionDirective از دستور if else برای بررسی پارامتر arg استفاده می کند. اگر پارامتر درست باشد، دستورالعمل با استفاده از الگوی ارائه شده یک نمای تعبیه شده ایجاد می کند. متد createEmbeddedView از کلاس ViewContainerRef نمای را در DOM ایجاد و رندر می کند.

اگر پارامتر نادرست باشد، دستورالعمل با استفاده از روش clear از کلاس ViewContainerRef، محفظه view را پاک می کند. این نماهایی که قبلا رندر شده اند را از DOM حذف می کند.

پس از ایجاد دایرکتیو، با وارد کردن و اعلام آن در فایل app.module.ts، آن را در پروژه خود ثبت کنید. پس از انجام این کار، می توانید شروع به استفاده از دستورالعمل در قالب های خود کنید.

در اینجا مثالی از نحوه استفاده از آن در قالب های خود آورده شده است:

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

اکنون می توانید دستورالعمل های سفارشی ایجاد کنید

دستورالعمل های سفارشی در Angular یک راه قدرتمند برای دستکاری DOM و افزودن رفتار پویا به قالب های شما ارائه می دهد. شما یاد گرفته اید که چگونه ویژگی های سفارشی و دستورالعمل های ساختاری را در برنامه های Angular خود ایجاد و اعمال کنید. با درک نحوه ایجاد و استفاده از دستورالعمل های سفارشی، می توانید از قابلیت های Angular نهایت استفاده را ببرید.

منبع مقاله