12. ربط الأحداث (Event Binding) ( )

يسمح ربط الأحداث للتطبيق بالاستجابة لتفاعلات المستخدم، مثل النقرات أو ضغطات المفاتيح أو عمليات إرسال النماذج. إنها طريقة لربط أسلوب مكون بحدث يتم إطلاقه بواسطة عنصر HTML.

الصيغة

يستخدم ربط الأحداث الأقواس العادية (( )) حول حدث عنصر الهدف. القيمة هي عبارة تنفذ أسلوب المكون.

html <element (event-name)="componentMethod($event)">

مثال: التعامل مع النقرات

فئة المكون (counter.component.ts):

typescript export class CounterComponent { count: number = 0;

increment() { this.count++; }

decrement() { if (this.count > 0) { this.count--; } } }

القالب (counter.component.html):

html

Current Count: {{ count }}

<button (click)="increment()">+

<button (click)="decrement()">-

كائن الحدث ($event)

تمرر العديد من أحداث DOM كائن حدث. يمكنك الوصول إلى هذا الكائن في تعبير الربط باستخدام الكلمة المفتاحية $event.

مثال: التقاط بيانات الإدخال

html <input (input)="onInput($event)" placeholder="Type here">

Current value: {{ inputValue }}

typescript export class InputComponent { inputValue: string = '';

onInput(event: Event) { // استخدام تأكيد النوع للوصول إلى خاصية value للعنصر الهدف this.inputValue = (event.target as HTMLInputElement).value; } }