@Input र @Output अभिभावक र बाल कम्पोनेन्ट बीचको मानक संचार तरिका हो: @Input डेटा पठाउँछ (अभिभावक → बाल), र घटनाहरू पठाउँछ (बाल → अभिभावक)। यो सार्वभौमिक "props down, events up" ढाँचा प्रतिबिम्बित गर्छ।
@Input र @Output अभिभावक र बाल कम्पोनेन्ट बीचको मानक संचार तरिका हो: @Input डेटा पठाउँछ (अभिभावक → बाल), र घटनाहरू पठाउँछ (बाल → अभिभावक)। यो सार्वभौमिक "props down, events up" ढाँचा प्रतिबिम्बित गर्छ।
@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 ले सिग्नल-आधारित input()/output() प्रकार्यहरू वैकल्पिकको रूपमा थप गर्छ।
@Input/@Output Angular मा अभिभावक-बाल संचार र पुनः प्रयोगयोग्य कम्पोनेन्टहरूको मूल हो — तिनीहरू एक-दिशात्मक डेटा प्रवाह (इनपुटहरू मार्फत तल, घटनाहरू मार्फत माथि) लागू गर्छन् जसले डेटा भविष्यवाणीयोग्य र कम्पोनेन्टहरू अलग रखन्छ।
यो जोडीलाई बुझ्नु कुनै पनि गैर-तुच्छ Angular UI सरचना गर्नको लागि आवश्यक छ; असम्बन्धित कम्पोनेन्टहरू बीचको संचारको लागि, तपाई सामान्य सेवा वा राज्य लाइब्रेरी प्रयोग गरेर सट्टा गर्न सक्नुहुन्छ।