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

  • شنبه ۲۹ دی ۱۳۹۷
  • بازدید ۲,۲۶۰ نفر

تصویر angular-6-directives_5621 دستورالعمل ها (Directives) در انگولار 6 - آموزش Angular 6

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

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

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

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

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

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

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

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

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

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

مانند:

خروجی دستور:

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

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

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

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

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

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

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

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

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

تصویر angular-6-directives_5621_1 دستورالعمل ها (Directives) در انگولار 6 - آموزش Angular 6

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است