@Input και @Output είναι ο τυπικός τρόπος επικοινωνίας ενός συστατικού parent με ένα συστατικό child: περνάει δεδομένα (parent → child), και στέλνει γεγονότα (child → parent). Αυτό αντικατοπτρίζει το καθολικό μοτίβο "props down, events up".
@Input και @Output είναι ο τυπικός τρόπος επικοινωνίας ενός συστατικού parent με ένα συστατικό child: περνάει δεδομένα (parent → child), και στέλνει γεγονότα (child → parent). Αυτό αντικατοπτρίζει το καθολικό μοτίβο "props down, events up".
@Input@Output// child: UserCardComponent
import { Component, Input } from "@angular/core";
@Component({ selector: "app-user-card", template: `<h2>{{ user.name }}</h2>` })
export class UserCardComponent {
@Input() user!: User; // receives data from the parent
@Input() showEmail = false; // with a default
}
<!-- parent passes data via property binding -->
<app-user-card [user]="currentUser" [showEmail]="true"></app-user-card>
// child emits an event the parent can listen to
import { Component, Output, EventEmitter } from "@angular/core";
@Component({
selector: "app-user-card",
template: `<button (click)="onDelete()">Delete</button>`,
})
export class UserCardComponent {
@Output() deleted = new EventEmitter<number>(); // declares an output event
onDelete() {
this.deleted.emit(this.user.id); // emit with a payload
}
}
<!-- parent listens via event binding -->
<app-user-card [user]="u" (deleted)="removeUser($event)"></app-user-card>
Το child εκπέμπει μέσω ενός EventEmitter; το parent συνδέεται σε αυτό με (eventName) και λαμβάνει το φορτίο ως $event. Το child δεν τροποποιεί ποτέ άμεσα τα δεδομένα του parent — ζητά δράση εκπέμποντας.
Parent ──[user]──────────────→ Child (@Input: data down)
Parent ←──(deleted)=removeUser─ Child (@Output: events up)
name = input<string>(); // signal-based @Input (newer Angular)
deleted = output<number>(); // signal-based @Output
Το πρόσφατο Angular προσθέτει συναρτήσεις input()/output() που βασίζονται σε σήματα ως εναλλακτική λύση.
@Input/@Output είναι το θεμέλιο της επικοινωνίας parent-child και των επαναχρησιμοποιήσιμων συστατικών στο Angular — επιβάλλουν ροή δεδομένων προς μία κατεύθυνση (προς τα κάτω μέσω inputs, προς τα πάνω μέσω events) που διατηρεί τα δεδομένα προβλέψιμα και τα συστατικά αποσυζευγμένα.
Η κατανόηση αυτού του ζεύγους είναι απαραίτητη για τη σύνθεση οποιασδήποτε μη τετριμμένης Angular UI· για επικοινωνία μεταξύ ανεξάρτητων συστατικών, θα χρησιμοποιούσατε αντ' αυτού ένα κοινόχρηστο service ή κάποια βιβλιοθήκη state.
Μια βιβλιοθήκη ερωτήσεων συνέντευξης IT με αναλυτικές απαντήσεις — από Junior έως Senior.
Δωρεά