متغیرهای ارجاعی (Reference Variables)

اینجا با «متغیر ارجاعی (Template Reference Variable)» آشنا می شوی. این متغیر با نشانه # به یک عنصر اسم محلی می دهد تا مقدارش را مستقیم در قالب بخوانی یا متدش را صدا بزنی.

متغیر ارجاعی چیست؟

متغیر ارجاعی مثل برچسب روی وسایل مدرسه است. با #box به ورودی اسم می دهی. سپس در همان قالب مقدارش را می خوانی یا متدش را اجرا می کنی. حوزه آن فقط همان قالب است.

<input #box (input)=\"val = box.value\">
<button (click)=\"box.focus()\">Focus</button>

مشاهده در ادیتور

نمونه کامل با کامپوننت

الان یک اپ کوچک می سازیم. ورودی را با #box نام گذاری می کنیم. سپس مقدار را می خوانیم و فوکوس می دهیم.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  styles: [
    `
    .toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    input { padding: 6px 8px; }
    `
  ],
  template: `
    <h3>Template Reference Variables (#var)</h3>
    <div class=\"toolbar\">
      <input #box type=\"text\" placeholder=\"Type something\" (input)=\"current = box.value\" />
      <button (click)=\"read(box.value)\">Read value</button>
      <button (click)=\"box.focus()\">Focus input</button>
      <span style=\"margin-left:8px;color:#666\">length={{ box.value?.length || 0 }}</span>
    </div>
    <p>Current: {{ current || '(empty)' }}</p>
  `
})
export class App {
  current = '';

  read(val: string): void {
    this.current = val ?? '';
  }
}

bootstrapApplication(App);

مشاهده در ادیتور

کی از متغیر ارجاعی استفاده کنیم؟

وقتی تعامل ساده می خواهی؛ مثل خواندن مقدار ورودی یا فوکوس. برای منطق پیچیده، وضعیت را در کلاس نگه دار. سپس با رویدادها مقدار را جابه جا کن.

نکته: متغیر ارجاعی فقط در همان قالب معتبر است. اگر به فایل دیگر نیاز داری، مقدار را به کامپوننت بده.

گام های عملی

1. روی ورودی بنویس #box.
2. در رویداد (input) مقدار box.value را کپی کن.
3. با کلیک، box.focus() را اجرا کن.
4. نتیجه را با ng serve ببین.

پیوندهای داخلی

برای مرور پایه متن پویا، صفحه جای گذاری (Interpolation) را ببین. سپس ادامه مسیر را در ناوبری امن (?.) دنبال کن. همچنین راهنمای متغیر ارجاعی انگولار را مرجع قرار بده.

جمع بندی سریع

• #var اسم محلی به عنصر می دهد.
• خواندن مقدار با box.value ساده است.
• می توان متد عنصر را صدا زد.
• حوزه آن فقط همان قالب است.
• برای منطق پیچیده، سراغ کلاس برو.