नमस्कार, हेब्र! मैं आपको
बेवकूफ बनाने के लिए "Angular में @Input, @Output और EventEmitter" लेख का अनुवाद आपके लिए प्रस्तुत करता हूं।
सभी को शुभकामनाएं जो कोणीय ढांचे की पेचीदगियों के बारे में जानकारी जमा करना चाहते हैं।
आज मैंने सोचा कि अंगुली घटकों के बीच बातचीत के संगठन के बारे में जानकारी का बेहतर अध्ययन करना और अंग्रेजी से मेरे लिए रुचि के लेखों का अनुवाद करने का अभ्यास करना शुरू कर दूं।
मुझे उम्मीद है कि ऐसे लोग हैं जिनके लिए
माध्यम से लेख का अनुवाद उपयोगी होगा।
लंबे समय से अंग्रेजी से उपयोगी लेखों का अनुवाद करना शुरू करने की इच्छा थी, मैंने एक सरल के साथ शुरू करने का फैसला किया, बहुत ही रोचक नहीं, लेकिन संभवतः लेख के मौजूदा ज्ञान का पूरक था। आपके ध्यान में, सज्जनों ...
कोणीय के लिए नए लोगों के लिए,
इनपुट और
आउटपुट डेकोरेटर शर्मनाक हो सकते हैं, खासकर जब आप कोड नमूनों के साथ अपने उद्देश्य का पता लगाने की कोशिश कर रहे हों। इस लेख में, मैं उन्हें सबसे सरल तरीके से समझाने की कोशिश करूंगा।
डेटा विनिमय उपकरण
सबसे पहले,
इनपुट और
आउटपुट डेकोरेटर्स का कार्य घटकों के बीच डेटा का आदान-प्रदान करना है। वे एक घटक से दूसरे में डेटा प्राप्त करने / भेजने के लिए एक तंत्र हैं।
इनपुट का उपयोग डेटा प्राप्त करने के लिए किया जाता है, जबकि
आउटपुट का उपयोग इसे भेजने के लिए किया जाता है।
आउटपुट उन्हें घटना निर्माता के रूप में, आमतौर पर
EventEmitter वर्ग की वस्तुओं के रूप में उजागर करके डेटा भेजता है
।इस प्रकार, जब आप इस की समानता में कोड देखते हैं:
@Component({ selector: 'todo-item', ... }) export class TodoItemComponent { @Input() item @Output() onChange = new EventEmitter() }
उसका मतलब है:
- अरे, मुझे मेरे भेजे गए डेटा की उम्मीद है। मैं उन्हें प्राप्त करूंगा और उन्हें आइटम संपत्ति के मूल्य के रूप में बचाऊंगा ।
- वैसे, मैं onChange संपत्ति का उपयोग करके डेटा भेजने का कारण बनूंगा।
मान लें कि आपके पास एक
टोडलिस्ट घटक है जिसमें एक
टोडोइम घटक है।
TodoLis t घटक टेम्पलेट में, आप देखने की उम्मीद करते हैं:
... <todo-item [item]="myTask" (onChange)="handleChange($event)" </todo-item> ...
इसका क्या मतलब है:
- टोडो लिस्ट घटक डेटा मूल्य को मेरीटैस्क संपत्ति में डाल देता है और इसे टोडोइम घटक में भेजता है
- टोडोइम घटक से स्थानांतरित डेटा प्राप्त किया जाएगा और टोडोइल घटक के हैंडलचेंज () फ़ंक्शन द्वारा संसाधित किया जाएगा
पर्याप्त सिद्धांत। आइए एक उदाहरण देखें।
एक उदाहरण पर ध्यान दें
।यहां मैंने 2 घटक बनाए,
हैलो घटक,
ऐप घटक में नेस्टेड।
हैलो घटक में
इनपुट और
आउटपुट है :
hello.component.ts @Component({ selector: 'hello', template: ` <h3 (click)="onClick.emit('Neo')"> ... </h3> ` }) export class HelloComponent { @Input() myFriend: string @Output() onClick = new EventEmitter() }
हैलो घटक एक स्ट्रिंग मान प्राप्त करने और इसे
MyFriend संपत्ति के मूल्य के रूप में डालने की
अपेक्षा करता है।
@Input() myFriend: string
हर बार जब आप उस पर क्लिक करते हैं, तो
आउटपुट डेकोरेटर की प्रॉपर्टी भेजने वाला डेटा पर क्लिक करके "बाहरी दुनिया" को "नियो" की सामग्री के साथ एक स्ट्रिंग पर भेज दिया जाएगा।
<h3 (click)="onClick.emit('Neo')">
नीचे
एप्लिकेशन घटक कोड है:
app.component.ts export class AppComponent { ng = 'Angular' myName = 'Neo' upCase(st:string): void { ... } } app.component.html <hello myFriend="{{ ng }}" (onClick)="upCase($event)"></hello> <h3>My name is {{ myName }}</h3>
ध्यान दें कि
ऐप घटक अपने टेम्पलेट में
हैलो घटक टैग का उपयोग करता है, जो 2 क्रिया करता है:
- एनजी संपत्ति का उपयोग करके हेलो घटक को स्ट्रिंग 'एंगुलर' का मान गुजरता है
- और हैलो घटक से भेजे गए मूल्य को प्राप्त करता है और upCase () फ़ंक्शन का उपयोग करके प्राप्त मूल्य को संसाधित करता है:
<hello myFriend="{{ ng }}" (onClick)="upCase($event)">
आप
यहां कार्रवाई में आवेदन देख सकते हैं
।