Πώς τα @Input και @Output ενεργοποιούν την επικοινωνία μεταξύ συστατικών;

Question

Accepted Answer

`@Input` και `@Output` είναι ο τυπικός τρόπος επικοινωνίας ενός συστατικού parent με ένα συστατικό child: **`@Input`** περνάει δεδομένα *προς τα κάτω* (parent → child), και **`@Output`** στέλνει γεγονότα *προς τα πάνω* (child → parent). Αυτό αντικατοπτρίζει το καθολικό μοτίβο "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 ``` Το child εκπέμπει μέσω ενός `EventEmitter`; το parent συνδέεται σε αυτό με `(eventName)` και λαμβάνει το φορτίο ως `$event`. Το child δεν τροποποιεί ποτέ άμεσα τα δεδομένα του parent — *ζητά* δράση εκπέμποντας. ## Το πλήρες μοτίβο ```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()` που βασίζονται σε σήματα ως εναλλακτική λύση. ## Γιατί είναι σημαντικό `@Input`/`@Output` είναι το θεμέλιο της επικοινωνίας parent-child και των επαναχρησιμοποιήσιμων συστατικών στο Angular — επιβάλλουν ροή δεδομένων προς μία κατεύθυνση (προς τα κάτω μέσω inputs, προς τα πάνω μέσω events) που διατηρεί τα δεδομένα προβλέψιμα και τα συστατικά αποσυζευγμένα. Η κατανόηση αυτού του ζεύγους είναι απαραίτητη για τη σύνθεση οποιασδήποτε μη τετριμμένης Angular UI· για επικοινωνία μεταξύ ανεξάρτητων συστατικών, θα χρησιμοποιούσατε αντ' αυτού ένα κοινόχρηστο service ή κάποια βιβλιοθήκη state.