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

  • دوشنبه ۲۱ مرداد ۱۳۹۸
  • بازدید ۱۸۴ نفر

angular7 directives 6616 تصویر

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

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

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

دستورالعمل های کامپوننت (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 لازم است را دارد.

angular7 directives 6616 1 تصویر

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

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

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