RxJS का उपयोग करते हुए कोणीय घटकों के बीच सहभागिता

विषय RxJS और BehaviourSubject RxJS का उपयोग करने के लिए एक गाइड कोणीय घटकों के बीच संवाद करने के लिए।

इस लेख में, मैं RxJS का उपयोग यह दिखाने के लिए करूँगा कि जब वे एक-दूसरे को नहीं जानते हैं या एक आम माता-पिता या बच्चे का रिश्ता नहीं है तो घटक कैसे बातचीत करते हैं।

सामग्री:

1. समस्या
2. विधि 1: इवेंट ट्रांसपोर्ट
3. विधि 2: सेवा प्रेक्षक
4. आवेदन

समस्या

कोणीय सहित कई चौखटे में, घटक इंटरैक्शन की समस्या हमेशा उत्पन्न होती है जब हम एप्लिकेशन को कई छोटे यूआई घटकों में विभाजित करते हैं और घटनाओं को सुनने के लिए मूल तत्व के मूल तत्व से बांधते हैं।

कोणीय में, हम आउटपुट () और इनपुट () का उपयोग करते हैं। मानक मामलों में, यह पर्याप्त है, लेकिन जब आपको इनकमिंग डेटा और आउटगोइंग इवेंट्स को पैरेंट घटक के साथ जोड़ना होगा, तो यह सब मैनेज करना एक बुरे सपने में बदल जाएगा।

आपको घटक के कई स्तरों पर इनपुट () और आउटपुट () का एक गुच्छा जोड़ना होगा - इसके लिए बहुत अधिक प्रयास की आवश्यकता होती है, जोखिम भरा होता है और हमेशा काम नहीं करता है।

एक समाधान असंबंधित घटकों को संवाद में मदद करने के लिए एक राज्य प्रबंधक - जैसे Redux, NGRX, या NGXS का उपयोग करना है।

इस लेख में, मैं इस समस्या को हल करने के लिए दो अतिरिक्त तरीके पेश करूंगा जिनमें अतिरिक्त पुस्तकालयों के उपयोग की आवश्यकता नहीं है।

1. विषय परिवहन का उपयोग करते हुए।
2. व्यवहार विषय का उपयोग करते हुए सेवा प्रेक्षक।

इन समाधानों को प्रदर्शित करने के लिए, मैं एक उदाहरण बनाऊंगा जिसमें एक उपयोगकर्ता एक लेख सूची आइटम पर क्लिक कर सकता है और अन्य घटक में विवरण प्रदर्शित कर सकता है।

विधि 1: इवेंट ट्रांसपोर्ट

अवधारणा बहुत सरल है। आप एक ऐसी सेवा बनाते हैं जिसकी घटनाएँ हर जगह उपलब्ध होंगी।
सेवा घटनाओं को वितरित करती है, और जब कोई घटना होती है, तो ग्राहक कॉलबैक फ़ंक्शन कर सकते हैं। इस लेख में, मैं रु। विषय का उपयोग करके एक ईवेंट ट्रांसपोर्ट बनाऊँगा।



जब भी कोई उपयोगकर्ता किसी लेख सूची आइटम पर क्लिक करता है, तो वह एक ईवेंट बनाता है और ईवेंट ट्रांसपोर्ट का उपयोग करके उसे प्रसारित करता है।



इस कोड का अर्थ है कि हमने आर्टिकल की जानकारी के साथ SelectArticleDetail इवेंट को भेज दिया।



श्रोता SelectArticleDetail को सुनेंगे और कॉलबैक करेंगे, लेख डेटा को एक स्थानीय चर में स्थानांतरित करेंगे और इसे उपयोगकर्ता इंटरफ़ेस में प्रदर्शित करेंगे।

विधि 2: सेवा प्रेक्षक

यह विचार केवल डेटा को भीतर से स्थानांतरित करने का एक तरीका है। यही है, हर बार एक मूल्य बदल जाता है, पर्यवेक्षक इस बारे में पता लगाता है और कॉलबैक का कार्य करता है।



जब भी कोई उपयोगकर्ता किसी सूची आइटम पर क्लिक करता है, तो वह रिपॉजिटरी में एक लेख जोड़ता है।



अब, भाग घटक में, हम नया मान प्राप्त करने के लिए रिपॉजिटरी अपडेट की सदस्यता लेंगे।

आवेदन

मैंने कई परियोजनाओं में इन तरीकों को लागू किया है। यहां कुछ उदाहरण दिए गए हैं जहां यह बहुत उपयुक्त है:

1. इवेंट ट्रांसपोर्ट: मैं बटन पर क्लिक करने पर हर बार एप्लिकेशन की स्थिति के बारे में उपयोगकर्ता की जानकारी दिखाने के लिए उसी मोडल विंडो का उपयोग करना चाहता हूं
2. इवेंट ट्रांसपोर्ट: यदि आप कई चौखटों के साथ एक मोनो-रिपॉजिटरी का उपयोग कर रहे हैं, तो फ्रेमवर्क के बीच घटनाओं का आदान-प्रदान करने या एंगुलर से देशी जावास्क्रिप्ट में किसी घटना को वितरित करने के लिए इस दृष्टिकोण का उपयोग करना सुविधाजनक है।
3. नेस्टेड कंपोनेंट्स के लिए इवेंट ट्रांसपोर्ट एंड सर्विस ऑब्जर्वर: इनपुट () और आउटपुट () का इनकमिंग / आउटगोइंग डेटा और यूआई कंपोनेंट के यूआई कंपोनेंट को यूआई कंपोनेंट बी से जोड़ने के लिए, यूआई कंपोनेंट सी और सी पैरेंट कंपोनेंट ए के साथ जब एपीआई के साथ इंटरैक्ट करना मुश्किल होता है

यदि आपके पास और उदाहरण हैं, तो मुझे उनके बारे में जानकर खुशी होगी। दूसरों से सीखना बेहतर बनाने का एक शानदार तरीका है।

संक्षेप में देना

यह लेख दो या दो से अधिक असंबंधित घटकों के बीच बातचीत के दो तरीकों के बारे में है।

हम सरल मामलों के लिए डेटा की सदस्यता के लिए सेवा प्रेक्षक का उपयोग करते हैं, और विभिन्न श्रोताओं को विभिन्न घटनाओं को भेजने के लिए इवेंट ट्रांसपोर्ट का उपयोग करते हैं।

आशा है कि लेख उपयोगी था! मीडियम और ट्विटर पर मुझे फॉलो करें टिप्पणी करने और प्रश्न पूछने के लिए स्वतंत्र महसूस करें। मुझे मदद करने में खुशी होगी!