جای گذاری (Interpolation)
اینجا «جای گذاری در انگولار» را یاد می گیری. جای گذاری (Interpolation) یعنی گذاشتن مقدار در متن HTML با {{ ... }}. خروجی فقط متن است و HTML را امن می کند.
جای گذاری چیست؟
بین دو آکولاد دوتایی مقدار را می نویسی. سپس مقدار به متن تبدیل می شود. این یک طرفه است؛ داده ← نما. برای ویژگی ها از Binding استفاده کن.
{{ expression }}
نمونه کامل جای گذاری
متن پویا نمایش بده. عبارت های ساده محاسبه می شوند. متدهای سبک هم مجازند.
import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
template: `
<h3>{{ title }}</h3>
<p>Hello {{ name }}!</p>
<p>2 + 3 = {{ 2 + 3 }}</p>
<p>Upper: {{ name.toUpperCase() }}</p>
`
})
export class App {
title = 'Templates & Interpolation';
name = 'Angular';
}
bootstrapApplication(App);
چه زمانی از جای گذاری استفاده کنیم؟
متن ساده را نشان بده. برای ویژگی ها از [prop] استفاده کن. اگر HTML لازم داری، با احتیاط [innerHTML] را ببند.
نکته: عبارات را سبک نگه دار. کار سنگین را در کلاس انجام بده. جای گذاری HTML را فراردهی می کند و فقط متن می سازد.
گام های عملی کوتاه
- یک ویژگی مثل
nameبساز. - در قالب بنویس
Hello {{ name }}. - یک عبارت ساده مثل
{{ 2 + 3 }}بگذار. - نتیجه را با
ng serveببین.
پیوندهای داخلی
برای مرور پایه به قالب ها برو. سپس فصل متغیرهای مرجع قالب را شروع کن. اگر لازم شد، همین صفحه جای گذاری در انگولار را مرور کن.
جمع بندی سریع
- {{ ... }} متن پویا می سازد.
- مسیر یک طرفه: داده ← نما.
- HTML را امن می کند.
- عبارت ها ساده و سریع باشند.
- برای ویژگی ها از Binding استفاده کن.