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

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

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

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

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

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

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

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

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

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

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

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

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

ng g directive nameofthedirective

e.g

ng g directive changeText

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

C:\projectA4\Angular 4-app>ng g directive changeText
installing directive
   create src\app\change-text.directive.spec.ts
   create src\app\change-text.directive.ts
   update src\app\app.module.ts

فایل های فوق یعنی 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: '[changeText]'
})

export class ChangeTextDirective {
   constructor() { }
}

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

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

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

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

change-text.directive.ts

import { Directive, ElementRef} from '@angular/core';
@Directive({
   selector: '[changeText]'
})

export class ChangeTextDirective {
   constructor(Element: ElementRef) {
      console.log(Element);
      Element.nativeElement.innerText="Text is changed by changeText Directive. ";
   }
}

در فایل بالا یک کلاس به نام ChangeTextDirective و یک سازنده وجود دارد که عنصر نوع ElementRef را که اجباری است می گیرد. این عنصر دارای تمام جزئیاتی است که دستور تغییر متن روی آن اعمال می شود.

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

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

منبع.

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

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