قالب ها (Templates) در انگولار ۶ – آموزش Angular 6

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

angular 6 templates 5611 تصویر

قالب ها (Templates) در انگولار ۶

در انگولار ۶ از <ng-template> به جای <template> که در انگولار ۲ استفاده می شد، استفاده می کنیم. دلیل این تغییر نام از template به ng-template این است که خود html یک تگ به نام <template> دارد و این موضوع باعث بوجود آمدن تناقض میان این دو تگ می شود.

در ادامه از template به همراه یک ساختار شرطی if else استفاده خواهیم کرد.

فایل app.component.html:

اگر به کد فوق توجه کنید، ما یک دستور if با یک بخش else به تگ <span> اضافه کرده ایم.

قالب ها به صورت زیر نوشته می شوند:

زمانی که شرط مورد بررسی true باشد، condition1 اجرا می شود و در غیر این صورت condition2 اجرا خواهد شد.

فایل app.component.ts:

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

angular 6 templates 5611 1 تصویر

از آنجایی که مقدار متغیر isavailable به صورت false تنظیم شده است، condition2 اجرا شده است.

angular 6 templates 5611 2 تصویر

حال اگر پنجره Inspect Elements را باز کنید، متوجه می شود که تگ span در کدهای شما وجود ندارد، زیرا انگولار آن را از DOM حذف کرده است و به جای آن فقط متن Condition is invalid from template ایجاد شده است.

حال کد بالا را به صورت زیر تغییر دهید:

با حذف شدن then از دستور شرطی، پیام Condition is valid در صفحه مرورگر نمایش داده می شود و تگ <span> نیز همچنان در کد ما وجود خواهد داشت. برای مثال اگر مقدار متغییر تعریف شده در فایل app.component.ts را به true تغییر دهید، خروجی زیر را مشاهده خواهید کرد:

angular 6 templates 5611 3 تصویر

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

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