इस सरल तकनीक का उपयोग करके अपने कोणीय घटकों के बीच डेटा भेजें।
एंगुलर में, एक वेब पेज में कई अलग-अलग पुन: प्रयोज्य घटक हो सकते हैं। प्रत्येक घटक में आमतौर पर अपना टाइपस्क्रिप्ट तर्क, HTML टेम्पलेट और CSS स्टाइल होता है।
आप अन्य घटकों के अंदर घटकों का पुन: उपयोग भी कर सकते हैं। इस स्थिति में, आप चाइल्ड कंपोनेंट से उसके पैरेंट कंपोनेंट को जानकारी भेजने के लिए आउटपुट डेकोरेटर का उपयोग कर सकते हैं।
आप चाइल्ड कंपोनेंट में होने वाली घटनाओं को सुनने के लिए आउटपुट डेकोरेटर का भी उपयोग कर सकते हैं।
चाइल्ड कंपोनेंट में आउटपुट डेकोरेटर कैसे जोड़ें
सबसे पहले, आपको पैरेंट कंपोनेंट और चाइल्ड कंपोनेंट के साथ एक नया Angular ऐप बनाना होगा।
एक बार आपके पास माता-पिता और बच्चे के घटक होने के बाद, आप आउटपुट डेकोरेटर का उपयोग डेटा ट्रांसफर करने और दो घटकों के बीच की घटनाओं को सुनने के लिए कर सकते हैं।
- कोई नया बनाएं कोणीय अनुप्रयोग. डिफ़ॉल्ट रूप से, "ऐप" रूट घटक का नाम है। इस घटक में तीन मुख्य फ़ाइलें शामिल हैं: "app.component.html", "app.component.css", और "app.component.ts"।
- इस उदाहरण के लिए, "ऐप" घटक मूल घटक के रूप में कार्य करेगा। सभी सामग्री को "app.component.html" में निम्न के साथ बदलें:
<डिवकक्षा="जनक-घटक">
<एच 1> यह मूल घटक है एच 1>
डिव> - "App.component.css" में मूल ऐप घटक में कुछ स्टाइल जोड़ें:
.जनक-घटक {
फुहारा परिवार: एरियल, Helvetica, सान्स सेरिफ़;
पृष्ठभूमि का रंग: मूंगा;
गद्दी: 20पिक्सल
} - "एनजी जनरेट कंपोनेंट" कमांड का उपयोग करें एक नया कोणीय घटक बनाएँ "डेटा-घटक" कहा जाता है। इस उदाहरण में, "डेटा-घटक" बाल घटक का प्रतिनिधित्व करेगा।
एनजी जी सी डेटा-घटक - "data-component.component.html" में चाइल्ड कंपोनेंट में सामग्री जोड़ें। नया बटन जोड़ने के लिए वर्तमान सामग्री को बदलें। बटन को उस फ़ंक्शन से बाइंड करें जो तब चलेगा जब उपयोगकर्ता उस पर क्लिक करेगा:
<डिवकक्षा="बाल-घटक">
<पी> यह बाल घटक है पी>
<बटन (क्लिक)="ऑनबटनक्लिक ()">मुझे क्लिक करेंबटन>
डिव> - "Data-component.component.css" में चाइल्ड कंपोनेंट में कुछ स्टाइल जोड़ें:
.बाल-घटक {
फुहारा परिवार: एरियल, Helvetica, सान्स सेरिफ़;
पृष्ठभूमि का रंग: हल्का नीला रंग;
अंतर: 20पिक्सल;
गद्दी: 20पिक्सल
} - "data-component.component.ts" में घटक के लिए टाइपस्क्रिप्ट फ़ाइल में ऑनबटनक्लिक () फ़ंक्शन जोड़ें:
ऑनबटनक्लिक () {
} - अभी भी टाइपस्क्रिप्ट फ़ाइल के अंदर, आयात सूची में "आउटपुट" और "इवेंटइमिटर" जोड़ें:
आयात {घटक, आउटपुट, इवेंटएमिटर, ऑनइनिट} से'@ कोणीय/कोर'; - DataComponentComponent वर्ग के अंदर, "buttonWasClicked" नामक घटक के लिए एक आउटपुट चर घोषित करें। यह एक इवेंट एमिटर होगा। एक EventEmitter एक बिल्ट-इन क्लास है जो आपको एक घटना होने पर दूसरे घटक को सूचित करने की अनुमति देता है।
निर्यातकक्षा डेटाकंपोनेंट औजार ऑनइनिट {
@आउटपुट() बटन क्लिक किया गया = नया इवेंट एमिटर <खालीपन>();
// ...
} - onButtonClick() फ़ंक्शन के अंदर "buttonWasClicked" ईवेंट एमिटर का उपयोग करें। जब उपयोगकर्ता बटन पर क्लिक करता है, तो डेटा-घटक इस घटना को पैरेंट ऐप घटक को भेज देगा।
ऑनबटनक्लिक () {
यह.buttonWasClicked.emit ();
}
चाइल्ड कंपोनेंट में इवेंट्स को पैरेंट कंपोनेंट से कैसे सुनें
चाइल्ड कंपोनेंट की Output प्रॉपर्टी का उपयोग करने के लिए, आपको पैरेंट कंपोनेंट से एमिटेड इवेंट को सुनना होगा।
- "App.component.html" के अंदर चाइल्ड कंपोनेंट का उपयोग करें। HTML टैग बनाते समय आप "buttonWasClicked" आउटपुट को गुण के रूप में जोड़ सकते हैं। ईवेंट को किसी नए फ़ंक्शन से बाइंड करें।
<ऐप-डेटा-घटक (बटन क्लिक किया गया था)="बटन इन चाइल्ड कॉम्पोनेंट वास क्लिक किया गया ()">ऐप-डेटा-घटक> - "App.component.ts" के अंदर, चाइल्ड कंपोनेंट में होने पर बटन क्लिक इवेंट को हैंडल करने के लिए नया फ़ंक्शन जोड़ें। उपयोगकर्ता द्वारा बटन पर क्लिक करने पर एक संदेश बनाएं।
संदेश: डोरी = ""बटनइनचाइल्डकंपोनेंटWasClicked() {
यहसंदेश = 'चाइल्ड घटक में बटन क्लिक किया गया था';
} - संदेश को "app.component.html" में प्रदर्शित करें:
<पी>{{संदेश}}पी> - अपने एंगुलर एप्लिकेशन को चलाने के लिए टर्मिनल में "एनजी सर्व" कमांड टाइप करें। इसे लोकलहोस्ट: 4200 पर वेब ब्राउजर में खोलें। माता-पिता और बच्चे के घटक अलग-अलग पृष्ठभूमि रंगों का उपयोग करते हैं ताकि उनके बीच अंतर करना आसान हो सके।
- पर क्लिक करें मुझे क्लिक करें बटन। बाल घटक घटना को मूल घटक को भेजेगा, जो संदेश प्रदर्शित करेगा।
चाइल्ड कंपोनेंट से पेरेंट कंपोनेंट को डेटा कैसे भेजें
आप चाइल्ड कंपोनेंट से पेरेंट कंपोनेंट को भी डेटा भेज सकते हैं।
- "Data-component.component.ts" में, कुछ डेटा वाले स्ट्रिंग्स की सूची को संग्रहीत करने के लिए एक चर जोड़ें।
लोगों की सूची: डोरी[] = ['जॉय', 'जॉन', 'जेम्स']; - ButtonWasClicked ईवेंट एमिटर के रिटर्न प्रकार को संशोधित करें। पिछले चरण में आपके द्वारा घोषित स्ट्रिंग्स की सूची से मिलान करने के लिए इसे शून्य से स्ट्रिंग [] में बदलें:
@आउटपुट() बटन क्लिक किया गया = नया इवेंट एमिटर <डोरी[]>(); - ऑनबटनक्लिक () फ़ंक्शन को संशोधित करें। ईवेंट को मूल घटक में भेजते समय, डेटा को एमिट () फ़ंक्शन में एक तर्क के रूप में जोड़ें:
ऑनबटनक्लिक () {
यह.buttonWasClicked.emit(यहलोगों की सूची);
} - "App.component.html" में, "app-data-component" टैग को संशोधित करें। ButtonInChildComponentWasClicked() फ़ंक्शन में "$event" जोड़ें। इसमें बाल घटक से भेजा गया डेटा शामिल है।
<ऐप-डेटा-घटक (बटन क्लिक किया गया था)="बटन इन चाइल्ड कॉम्पोनेंट वास क्लिक किया गया ($ घटना)">ऐप-डेटा-घटक> - डेटा के लिए पैरामीटर जोड़ने के लिए "app.component.ts" में फ़ंक्शन को अपडेट करें:
बटनइनचाइल्डकंपोनेंटWasClicked (डेटाफ्रॉम चाइल्ड: डोरी[]) {
यहसंदेश = 'चाइल्ड घटक में बटन क्लिक किया गया था';
} - बाल घटक से आने वाले डेटा को संग्रहीत करने के लिए "डेटा" नामक एक नया चर जोड़ें:
संदेश: डोरी = ""
आंकड़े: डोरी[] = []बटनइनचाइल्डकंपोनेंटWasClicked (डेटाफ्रॉम चाइल्ड: डोरी[]) {
यहसंदेश = 'चाइल्ड घटक में बटन क्लिक किया गया था';
यहडेटा = डेटाफ्रॉम चाइल्ड;
} - HTML पृष्ठ पर डेटा प्रदर्शित करें:
<पी>{{डेटा.जॉइन (', ')}}पी> - अपने एंगुलर एप्लिकेशन को चलाने के लिए टर्मिनल में "एनजी सर्व" कमांड टाइप करें। इसे लोकलहोस्ट: 4200 पर वेब ब्राउजर में खोलें।
- पर क्लिक करें मुझे क्लिक करें बटन। चाइल्ड कंपोनेंट चाइल्ड कंपोनेंट से पैरेंट कंपोनेंट को डेटा भेजेगा।
आउटपुट डेकोरेटर का उपयोग करके अन्य घटकों को डेटा भेजना
ऐसे अन्य डेकोरेटर हैं जिनका आप एंगुलर में उपयोग कर सकते हैं, जैसे कि इनपुट डेकोरेटर या कंपोनेंट डेकोरेटर। आप अपने कोड को सरल बनाने के लिए एंगुलर में अन्य सज्जाकारों का उपयोग कैसे कर सकते हैं, इसके बारे में अधिक जान सकते हैं।
