@Input మరియు @Output ఒక ఆభిభవక్త మరియు చిల్ డ్రెన్ కాంపోనెంట్ కమ్యూనికేట్ చేయడానికి స్టాండర్డ్ మార్గం: డేటాను పంపుతుంది (ఆభిభవక్త → చిల్ డ్రెన్), మరియు ఈవెంట్లను పంపుతుంది (చిల్ డ్రెన్ → ఆభిభవక్త). ఇది యూనివర్సల్ "props డౌన్, ఈవెంట్లు అప్" ప్యాటర్న్ను ప్రతిబింబిస్తుంది.
@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>
చిల్ డ్రెన్ EventEmitter ద్వారా విడుదల చేస్తుంది; ఆభిభవక్త (eventName) తో బైండ్ చేస్తుంది మరియు పేలోడ్ను $eventగా స్వీకరిస్తుంది. చిల్ డ్రెన్ కూడా ఎన్నటికీ ఆభిభవక్త డేటాను నేరుగా సవరించదు — విడుదల చేయడం ద్వారా కోరుకుంటుంది.
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 signal-ఆధారిత input()/output() ఫంక్షన్లను ఒక ప్రత్యామ్నాయంగా జోడిస్తుంది.
@Input/@Output Angular లో ఆభిభవక్త-చిల్ డ్రెన్ కమ్యూనికేషన్ మరియు పునర్వినియోగ కాంపోనెంట్ల కోర్ — అవి వన్-వే డేటా ఫ్లో (ఇన్పుట్ల ద్వారా క్రిందకు, ఈవెంట్ల ద్వారా పైకు) ను ప్రవర్తించాయి, ఇది డేటాను ఊహించదగినది మరియు కాంపోనెంట్లను అన్కపల్డ్గా ఉంచుతుంది.
ఈ జత అర్థం చేసుకోవడం కుదిరని Angular UI ను కంపోజ్ చేయడానికి అవసరం; సంబంధం లేని కాంపోనెంట్ల మధ్య కమ్యూనికేషన్ కోసం, మీరు బదులుగా భాగస్వామ్య సేవ లేదా రాష్ట్ర లైబ్రరీ ఉపయోగించుకోవాలి.