آموزش دستورالعمل ها در انگولار ۶

آموزش دستورالعمل ها در انگولار ۶

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش دستورالعمل ها در انگولار ۶ خواهیم پرداخت.

دستورالعمل ها (Directives) در انگولار یک کلاس js است که به عنوان @directive اعلام شده است. ما در انگولار ۳ دستور داریم. دستورالعمل ها در زیر فهرست شده اند –

دستورالعمل های کامپوننت

اینها کلاس اصلی را تشکیل می دهند که جزئیاتی از نحوه پردازش، نمونه سازی و استفاده از مؤلفه در زمان اجرا دارد.

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

یک دستورالعمل ساختار اساساً با دستکاری عناصر dom سر و کار دارد. بخشنامه های ساختاری قبل از بخشنامه دارای علامت * هستند. برای مثال *ngIf و *ngFor.

دستورالعمل های ویژگی

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

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

در این بخش، در مورد دستورالعمل های سفارشی برای استفاده در کامپوننت ها بحث خواهیم کرد. دستورالعمل های سفارشی توسط ما ایجاد می شوند و استاندارد نیستند.

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

ng g directive nameofthedirective
e.g
ng g directive changeText

به این ترتیب در خط فرمان ظاهر می شود

C:\projectA6\Angular6App>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 { }

کلاس ChangeTextDirective در اعلان های فایل فوق گنجانده شده است. کلاس نیز از فایل زیر وارد می شود.

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

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

در نمای app.component.html، اجازه دهید دستورالعمل را به صورت زیر اضافه کنیم –

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

تغییرات را در فایل change-text.directive.ts به صورت زیر می نویسیم

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 و یک سازنده وجود دارد که عنصری از نوع ElementRef را می گیرد که اجباری است. این عنصر دارای تمام جزئیاتی است که دستور Change Text روی آن اعمال می شود.

ما عنصر console.log را اضافه کرده ایم. خروجی همان را می توان در کنسول مرورگر مشاهده کرد. متن عنصر نیز مطابق تصویر بالا تغییر می کند.

اکنون مرورگر موارد زیر را نشان می دهد.

منبع.

لیست جلسات قبل آموزش انگولار ۶

1. آموزش انگولار ۶
2. آموزش مقدمه انگولار ۶
3. آموزش راه اندازی محیط انگولار ۶
4. آموزش راه اندازی پروژه در انگولار ۶
5. آموزش کامپوننت ها در انگولار ۶
6. آموزش ماژول در انگولار ۶
7. آموزش اتصال داده در انگولار ۶
8. آموزش اتصال رویداد در انگولار ۶
9. آموزش تمپلیت ها در انگولار ۶