عبارات و $event (Statements and $event)

اینجا با «عبارت (Statement)» رویدادها را پاسخ می دهیم. سپس با $event شی رویداد خام را می گیریم. مثل وقتی دکمه می زنی و امتیازت زیاد می شود.

عبارت و $event یعنی چه؟

عبارت یعنی کد کوتاه در قالب که هنگام رویداد اجرا می شود. رویداد (Event) مثل کلیک یا تایپ است. $event همان شی بومی مرورگر است. برای خواندن مقدار ورودی، از $any($event.target).value کمک بگیر.

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

• برای کارهای ساده و سریع در رابط کاربری.
• منطق سنگین را به کلاس کامپوننت ببر.
• با متغیر ارجاعی ترکیبش کن تا ساده بماند.

نمونه کامل

دکمه را بزن. شمارنده زیاد می شود. سپس تایپ کن و متن را ببین.

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <button (click)=\"count = count + 1\">Increment</button>
    <input placeholder=\"Type\" (input)=\"text = $any($event.target).value\" [value]=\"text\" />
    <p>Count: {{ count }}</p>
    <p>Text: {{ text || '(empty)' }}</p>
  `
})
export class App {
  count: number = 0;
  text: string = '';
}

bootstrapApplication(App);

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

گام های عملی

1. رویداد را با (click) یا (input) وصل کن.
2. یک انتساب ساده در قالب انجام بده.
3. در صورت نیاز مقدار را از $event بخوان.

نکته ها

نکته: عبارت ها کوتاه بمانند؛ توابع پیچیده را در کلاس بنویس.

نکته: برای ورودی ها، $any($event.target).value خطای تایپی را رفع می کند.

پیوندهای مرتبط

قبلش ngTemplateOutlet را ببین. ادامه مسیر با ngIf as است. همچنین صفحه عبارات و $event را نشانه گذاری کن.

منبع W3Schools · اجرای زنده نمونه

جمع بندی سریع

• رویداد را با پرانتز می بندی.
• عبارت ها کوتاه و شفاف باشند.
• $event شی رویداد بومی است.
• $any(...) مشکل تایپ ها را حل می کند.