كيف يمكّن @Input و @Output التواصل بين المكونات؟

Question

Accepted Answer

`@Input` و `@Output` هما الطريقة القياسية للتواصل بين مكون الوالد ومكون الطفل: **`@Input`** ينقل البيانات *لأسفل* (الوالد → الطفل)، و **`@Output`** يرسل الأحداث *لأعلى* (الطفل → الوالد). وهذا يعكس النمط العالمي "props down, events up". ## @Input — تدفق البيانات لأسفل ```ts // child: UserCardComponent import { Component, Input } from "@angular/core"; @Component({ selector: "app-user-card", template: `

` }) export class UserCardComponent { @Input() user!: User; // receives data from the parent @Input() showEmail = false; // with a default } ``` ```html ``` ## @Output — تدفق الأحداث لأعلى ```ts // child emits an event the parent can listen to import { Component, Output, EventEmitter } from "@angular/core"; @Component({ selector: "app-user-card", template: ``, }) export class UserCardComponent { @Output() deleted = new EventEmitter(); // declares an output event onDelete() { this.deleted.emit(this.user.id); // emit with a payload } } ``` ```html ``` يرسل الطفل من خلال `EventEmitter`؛ يربط الوالد به باستخدام `(eventName)` ويستقبل الحمل كـ `$event`. الطفل لا يعدّل بيانات الوالد مباشرة — بل *يطلب* إجراءً بإرسال حدث. ## النمط الكامل ```text Parent ──[user]──────────────→ Child (@Input: data down) Parent ←──(deleted)=removeUser─ Child (@Output: events up) ``` ## signal inputs الحديثة ```ts name = input(); // signal-based @Input (newer Angular) deleted = output(); // signal-based @Output ``` أضافت Angular الحديثة دوال `input()`/`output()` المستندة إلى signals كبديل. ## لماذا يهم هذا `@Input`/`@Output` هما جوهر التواصل بين الوالد والطفل والمكونات القابلة لإعادة الاستخدام في Angular — فهما يفرضان تدفق البيانات في اتجاه واحد (لأسفل عبر inputs، لأعلى عبر events) الذي يحافظ على البيانات يمكن التنبؤ بها والمكونات غير المرتبطة. فهم هذا الزوج ضروري لتكوين أي واجهة مستخدم في Angular غير تافهة؛ للتواصل بين المكونات غير ذات الصلة، ستستخدم بدلاً من ذلك خدمة مشتركة أو مكتبة state.