Si komunikojnë @Input dhe @Output komunikimin e komponenteve?

Question

Accepted Answer

`@Input` dhe `@Output` janë mënyra standarde se si komunikojnë komponenta prind dhe fëmije: **`@Input`** kaloi të dhënat *poshtë* (prind → fëmije), dhe **`@Output`** dërgon ngjarje *lart* (fëmije → prind). Kjo pasqyron modelin universal "props poshtë, ngjarje lart". ## @Input — të dhënat rrjedhin poshtë ```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 — ngjarjet rrjedhin lart ```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 ``` Fëmija dërgon përmes `EventEmitter`; prindi lidhet me të përmes `(eventName)` dhe merr ngarkesën si `$event`. Fëmija kurrë nuk modifikon të dhënat e prindit drejtpërdrejtë — *kërkon* veprim duke dërguar. ## Modeli i plotë ```text Parent ──[user]──────────────→ Child (@Input: data down) Parent ←──(deleted)=removeUser─ Child (@Output: events up) ``` ## Sinjale hyrëse moderne ```ts name = input(); // signal-based @Input (newer Angular) deleted = output(); // signal-based @Output ``` Angular-i i fundit shton funksionet `input()`/`output()` të bazuara në sinjale si alternativë. ## Pse është e rëndësishme `@Input`/`@Output` janë bërthama e komunikimit prind-fëmije dhe komponenteve të ripërdorshme në Angular — ato zbatojnë rrjedhën e të dhënave në një drejtim (poshtë përmes hyrjeve, lart përmes ngjarjeve) që mban të dhënat e parashikueshme dhe komponentet të pa lidhura. Kuptimi i këtij çifti është thelbësor për përbërjen e çdo Angular UI jobanale; për komunikimin midis komponenteve të pa lidhura, do të përdornit një shërbim të përbashkët ose bibliotekë gjendje.