دستورالعمل ها (Directives) در انگولار ۶ – آموزش Angular 6

دستورالعمل ها (Directives) در انگولار ۶

دستورالعمل ها (Directives) در انگولار یک کلاس است که به صورت @directive اعلان شده است. انگولار شامل سه نوع دستورالعمل است که در ادامه بررسی می کنیم.

دستورالعمل های کامپوننت (Component Directives)

این دستورالعمل ها در کلاس اصلی تعریف شده اند و جزئیات مربوط به چگونگی پردازش و استفاده شدن کامپوننت ها را دارند.

دستورالعمل های ساختاری (Structural Directives)

دستورالعمل های ساختاری به طوری کلی برای دستکاری عناصر DOM مورد استفاده قرار می گیرد. این نوع دستورالعمل ها با * شروع می شوند (مانند *ngIf و *ngFor).

دستورالعمل های صفتی (Attribute Directives)

این دستورالعمل ها برای تغییر در استایل و ظاهر عناصر استفاده می شوند (مثلا برای تغییر پس زمینه یک عنصر).

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

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

ng g directive nameofthedirective

مانند:

ng g directive changeText

خروجی دستور:

ng g directive changeText
CREATE src/app/change-text.directive.spec.ts (241 bytes)
CREATE src/app/change-text.directive.ts (149 bytes)
UPDATE src/app/app.module.ts (486 bytes)

خروجی فوق به ما می گوید که فایل change-text.directive.spec.ts و change-text.directive.ts ایجاد و محتوای فایل app.module.ts نیز به روز رسانی شد.

محتوای فایل app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
@NgModule({
   declarations: [
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

محتوای فایل change-text.directive.ts:

import { Directive } from '@angular/core';
@Directive({
   selector: '[appChangeText]'
})
export class ChangeTextDirective {
   constructor() { }
}

دستورالعمل فوق یک selector دارد و هر آنچه که در آن تعریف می شود، باید دقیقا در View استفاده شود. به عبارت دیگر برای استفاده از دستورالعمل از چیزی که در بخش selector تعریف شده است، استفاده می کنیم.

محتوای فایل app.component.html و نحوه استفاده از دستورالعمل ChangeText:

<div style = "text-align:center">
   <span appChangeText >Welcome to {{title}}.</span>
</div>

ما تغییراتی که باید اعمال شوند را در فایل change-text.directive.ts نوشته ایم:

import { Directive, ElementRef} from '@angular/core';
@Directive({
   selector: '[appChangeText]'
})
export class ChangeTextDirective {
   constructor(Element: ElementRef) {
      console.log(Element);
      Element.nativeElement.innerText = "Text is changed by changeText Directive. ";
   }
}

در کد فوق، یک کلاس به نام ChangeTextDirective و یک سازنده وجود دارد که یک پارامتر اجباری element از نوع ElementRef را می گیرد. این element تمامی جزئیاتی که برای اعمال دستورالعمل ChangeText لازم است را دارد.

همچنین یک console.log نیز به این سازنده اضافه شده است که پارامتر ورودی را در Console نمایش می دهد.

خروجی برنامه:

نوشته دستورالعمل ها (Directives) در انگولار ۶ – آموزش Angular 6 اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.