@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 இல் பெற்றொரு-சிறுவன் পரஸ్परం மற்றும் पुনुर्ব्যवহार்य कूறुகளের মূल — அवे一राह्य डेटा প্रवाह (इनपुट के মাধ্यমे नीচे, ଇଭେNTଟ୍ର მаध्यमे ऊपरे) लागु करते हैं जो डेटा को পূर্वাभাসযोগ्य এবং কூறุกुলॉनfejـت রাখে.
यह जोरी को समझना कोई नون-ट्रिविय়ाल Angular UI बनाने के लिए आवshyक है; असंबंधित कूषuकों के बीच संचار के लिए, आप एक साझा सेवा या अवस्था पुस्تकालय का उपयोग करेंगे।