66. تفاعل المكونات: Output و EventEmitter

لتوصيل البيانات لأعلى شجرة المكونات (من الابن إلى الأب)، يستخدم Angular المُزخرف @Output() جنباً إلى جنب مع فئة EventEmitter.

1. تحديد الإخراج في مكون الابن

يجب أن تكون خاصية @Output() مثيلاً لـ EventEmitter<T>، حيث T هو نوع البيانات المراد إرسالها. يوفر EventEmitter طريقة emit().

typescript // item-selector.component.ts (الابن) import { Component, Output, EventEmitter } from '@angular/core';

@Component({ /* ... */ }) export class ItemSelectorComponent {

// تحديد اسم الحدث ونوع الحمولة (string في هذه الحالة) @Output() itemSelected = new EventEmitter();

selectItem(itemName: string) { // 1. تشغيل الحدث this.itemSelected.emit(itemName); } }

2. الاستماع للحدث في مكون الأب

يستمع مكون الأب باستخدام صيغة ربط الأحداث (( )) ويربط القيمة المُطلَقة (التي يوفرها Angular عبر الكلمة المفتاحية $event) بطريقة الأب.

typescript // parent.component.ts export class ParentComponent { lastSelectedItem: string = 'None';

// طريقة للتعامل مع حمولة الحدث handleSelection(name: string) { this.lastSelectedItem = name; console.log(Child selected: ${name}); } }

html

<app-item-selector (itemSelected)="handleSelection($event)">

Last Selection: {{ lastSelectedItem }}

أفضل الممارسات: قم دائماً بتعريف اسم حدث الإخراج بوضوح واستخدم EventEmitter فقط لتواصل المكونات، وليس للخدمات (حيث يجب استخدام RxJS Subjects).