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

angular7 templates 6614 تصویر

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

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

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

فایل app.component.html:

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

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

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

فایل app.component.ts:

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

angular7 templates 6614 1 تصویر

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

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

تابع myClickFunction مقدار متغیر isavailable را اگر true باشد، false و اگر false باشد true می کند.

زمانی که بر روی دکمه کلیک کنید، با توجه به مقدار متغیر isavailable یکی از خروجی های زیر را مشاهده خواهید کرد.

angular7 templates 6614 2 تصویر

angular7 templates 6614 3 تصویر

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

angular7 templates 6614 4 تصویر

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

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

angular7 templates 66145 تصویر

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

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