@Input आणि @Output कसे घटक संचार सक्षम करते?

Question

Accepted Answer

`@Input` आणि `@Output` हे मानक मार्ग आहेत ज्यामार्फत पालक आणि बाल घटक संचार करतात: **`@Input`** डेटा *खाली* पास करते (पालक → मुल), आणि **`@Output`** इव्हेंट्स *वर* पाठवते (मुल → पालक). हे सार्वभौमिक "props खाली, events वर" पद्धत प्रतिबिंबित करते. ## @Input — डेटा खाली वाहते ```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 — events वर वाहते ```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 ``` बाल घटक `EventEmitter` द्वारे उत्सर्जित करते; पालक घटक `(eventName)` सह बांधते आणि पेलोड `$event` म्हणून प्राप्त करते. बाल कधीही पालकचे डेटा थेट बदलत नाही — तो उत्सर्जन करून क्रिया *विनंती* करते. ## संपूर्ण पद्धत ```text Parent ──[user]──────────────→ Child (@Input: data down) Parent ←──(deleted)=removeUser─ Child (@Output: events up) ``` ## आधुनिक सिग्नल इनपुट्स ```ts name = input(); // signal-based @Input (newer Angular) deleted = output(); // signal-based @Output ``` अलीकडील Angular सिग्नल-आधारित `input()`/`output()` फंक्शन्स पर्यायी म्हणून जोडते. ## हे महत्वाचे का आहे `@Input`/`@Output` Angular मध्ये पालक-मुल संचार आणि पुन:वापरयोग्य घटकांचा मूल आहेत — ते एक-मार्गी डेटा प्रवाह (inputs द्वारे खाली, events द्वारे वर) लागू करतात जो डेटा अनुमानित आणि घटक विघटित ठेवतात. Angular UI ची कोणतीही नॉन-ट्रिव्हियल रचना करण्यासाठी या जोडीचे समज आवश्यक आहे; असंबंधित घटकांमध्ये संचारासाठी, आप्टी सामायिक सेवा किंवा स्थिति लायब्रेरी वापरा.