Cum permit @Input și @Output comunicarea între componente?

Question

IT Interview Practice · Accepted Answer

`@Input` și `@Output` sunt modul standard prin care o componentă părinte și copil comunică: **`@Input`** transmite date *în jos* (părinte → copil), iar **`@Output`** trimite evenimente *în sus* (copil → părinte). Aceasta reflectă modelul universal "props down, events up". ## @Input — date curg în jos ```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 — evenimente curg în sus ```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 ``` Componenta copil emite prin `EventEmitter`; componenta părinte se leagă la aceasta cu `(eventName)` și primește payload-ul ca `$event`. Componenta copil nu modifică niciodată datele părintelui direct — *cere* acțiune prin emisie. ## Modelul complet ```text Parent ──[user]──────────────→ Child (@Input: data down) Parent ←──(deleted)=removeUser─ Child (@Output: events up) ``` ## Intrări de semnal moderne ```ts name = input(); // signal-based @Input (newer Angular) deleted = output(); // signal-based @Output ``` Angular recent adaugă funcții `input()`/`output()` bazate pe semnale ca alternativă. ## De ce este important `@Input`/`@Output` sunt esența comunicării părint-copil și componentelor reutilizabile în Angular — ele aplică flux de date unidirecțional (în jos prin intrări, în sus prin evenimente) care menține datele previzibile și componentele decuplate. Înțelegerea acestei perechi este esențială pentru a compune orice interfață Angular non-trivială; pentru comunicare între componente neînrudite, ați folosi în schimb un serviciu partajat sau bibliotecă de stare.

@Input — date curg în jos

@Output — evenimente curg în sus

Modelul complet

Intrări de semnal moderne

De ce este important

Întrebări conexe