 में मोडल संवादों का उपयोग करना काफी आम है। चाहे आप किसी भिन्न पृष्ठ पर नेविगेट किए बिना तालिका में किसी रिकॉर्ड को संपादित करना चाहते हों, कुछ डेटा देखना चाहते हों, या बस अपने उपयोगकर्ताओं को एक चेतावनी संदेश दिखाना चाहते हों, मोडल डायलॉग का उपयोग करना एक बेहतरीन उपयोगकर्ता अनुभव हो सकता है। दुर्भाग्य से,   में थर्ड-पार्टी लाइब्रेरी के बिना ऐसा करना बहुत आसान नहीं है। इसके लिए कुछ गैर-तुच्छ कोड लिखने और कोणीय ढांचे के आंतरिक तंत्र की समझ की आवश्यकता होती है। यही कारण है कि हमने एंगुलर में मोडल डायलॉग दिखाने के लिए डेवलपर पार्टनर्स में एक लाइब्रेरी विकसित की है। हम इस लेख में अपनी लाइब्रेरी का उपयोग करने जा रहे हैं। वेब अनुप्रयोगों एंगुलर  1. लाइब्रेरी स्थापित करें  हमें एनपीएम के माध्यम से अपनी   लाइब्रेरी स्थापित करनी होगी और इसका उपयोग करने में सक्षम होने के लिए इसे अपने एंगुलर मॉड्यूल में शामिल करना होगा। इसे स्थापित करने के लिए एनपीएम कमांड यहां दी गई है: @डेवलपर-पार्टनर/एनजीएक्स-मोडल-डायलो  जी   एनपीएम @डेवलपर-पार्टनर/एनजीएक्स-मोडल-डायलॉग इंस्टॉल करें  इसके बाद, हमें इसे एंगुलर मॉड्यूल में शामिल करना होगा जहां हमें मोडल डायलॉग का उपयोग करना होगा। हमारा डेमो एप्लिकेशन बहुत छोटा है, इसमें केवल एक मॉड्यूल है जिसे AppModule कहा जाता है। हमें अपने AppModule Angular मॉड्यूल के आयात सरणी में लाइब्रेरी से ModalModule को शामिल करना होगा:   हम तैयार हैं। हम अपने एप्लिकेशन में मोडल डायलॉग घटक का उपयोग शुरू कर सकते हैं।  2. एक मॉडल संवाद दिखाएँ  जैसा कि पहले उल्लेख किया गया है, जब हम अपनी पुस्तकों की सूची में कोई पुस्तक जोड़ना या संपादित करना चाहते हैं तो हम अपना मोडल डायलॉग दिखाने जा रहे हैं। आइए पहले एक घटक बनाएं जहां हम पुस्तकों की सूची दिखाने जा रहे हैं। हम एक नया Angular घटक बनाने जा रहे हैं और इसे   नाम देंगे। BookListComponent  यह   टाइपस्क्रिप्ट वर्ग की सामग्री है:  BookListComponent  हमारा   वर्ग सरलता के लिए हमारी तालिका में डेटा दिखाने के लिए पुस्तकों की एक हार्डकोडेड सूची का उपयोग करता है। मोडल डायलॉग दिखाने में सक्षम होने के लिए इसे ngx-modal-dialog लाइब्रेरी से   Angular सेवा की भी आवश्यकता होती है, इसीलिए हमने इसे अपने कंस्ट्रक्टर में इंजेक्ट किया है। BookListComponent ModalService  इसके बाद, हम   के लिए HTML फ़ाइल बनाएंगे जहां हम HTML तालिका में पुस्तकों की सूची दिखाएंगे:  BookListComponent  उपरोक्त HTML कोड बहुत सरल है. यह एक तालिका में पुस्तकों की सूची दिखाता है। इसमें "नई पुस्तक जोड़ें" नामक एक बटन भी है।  अब तक का यूआई इस प्रकार दिखता है:   जब "नई पुस्तक जोड़ें" बटन पर क्लिक किया जाता है, तो यह हमारे टाइपस्क्रिप्ट वर्ग में   फ़ंक्शन को कॉल करता है।   फ़ंक्शन हमारी तालिका में एक नई पुस्तक जोड़ने के लिए मोडल डायलॉग दिखाता है। यह   फ़ंक्शन का टाइपस्क्रिप्ट कोड है:  createBook क्रिएटबुक createBook    फ़ंक्शन   क्लास के   फ़ंक्शन को कॉल करके मोडल डायलॉग दिखाता है।   फ़ंक्शन 2 पैरामीटर लेता है: मोडल डायलॉग के अंदर दिखाने के लिए कोणीय घटक का वर्ग और मोडल डायलॉग के विकल्प जो डायलॉग की सेटिंग्स हैं जैसे शीर्षक, आकार, स्थिति और कुछ अन्य चीजें। मोडल डायलॉग को अपने मुख्य भाग में दिखाने के लिए एक कोणीय घटक की आवश्यकता होती है। उस घटक के बिना, हमारा मोडल डायलॉग स्क्रीन पर ओवरले करने वाला एक खाली पैनल मात्र होगा। वह घटक   है जो ऊपर स्क्रीनशॉट में   फ़ंक्शन का पहला पैरामीटर है। createBook ModalService शो शो CreateEditBookComponent शो    Angular घटक पुस्तकों को जोड़ने और संपादित करने दोनों के लिए जिम्मेदार होगा। हम नई पुस्तकें जोड़ने के लिए कोड पर काम करके शुरुआत करेंगे। यहां CreateEditBookComponent का HTML कोड है जिसमें उस पुस्तक की आईडी और शीर्षक दर्ज करने के लिए केवल कुछ फ़ील्ड हैं जिन्हें हम बनाना चाहते हैं और संवाद बंद करने और डेटा सहेजने के लिए बटन हैं:  CreateEditBookComponent  मोडल डायलॉग यूआई इस प्रकार दिखता है:   यहाँ CreateEditBookComponent घटक का टाइपस्क्रिप्ट कोड है:     घटक   नामक एक Angular सेवा का उपयोग करता है  पुस्तकालय। हम उस सेवा का उपयोग उस मोडल डायलॉग के साथ इंटरैक्ट करने के लिए करते हैं जहां हमारा घटक रखा जाता है जैसे कि मोडल को बंद करना या उसके इवेंट की सदस्यता लेना। हम उपरोक्त स्क्रीनशॉट में   फ़ंक्शन में मोडल डायलॉग को बंद कर देते हैं। जब HTML से "रद्द करें" बटन पर क्लिक किया जाता है तो हम   फ़ंक्शन को कॉल करते हैं। जब हम HTML कोड में "सेव" बटन पर क्लिक करते हैं, तो यह फॉर्म सबमिट करता है जो   फ़ंक्शन को कॉल करता है।   फ़ंक्शन में, हम   फ़ंक्शन की तरह ही मोडल डायलॉग को बंद कर देते हैं, लेकिन हम इसमें   प्रॉपर्टी भी पास कर देते हैं, जिसमें हमारी सूची में एक नई पुस्तक जोड़ने के लिए डेटा होता है। CreateEditBookComponent ModalReference   एनजीएक्स-मोडल-संवाद कैंसिल कैंसल सेवडेटा सेवडेटा कैंसिल बुक    सेवा एक सामान्य प्रकार है। जब हम   सेवा के   फ़ंक्शन को कॉल करते हैं, तो हमें उसी प्रकार के ऑब्जेक्ट को उसके सामान्य पैरामीटर के रूप में पास करना होगा। हमारे मामले में, यह एक टाइपस्क्रिप्ट इंटरफ़ेस है जिसे   कहा जाता है। जिस पैरामीटर को हम   फ़ंक्शन में पास करते हैं, वह उस घटक को वापस भेज दिया जाता है जिसने   क्लास के   फ़ंक्शन को कॉल करके मोडल डायलॉग बनाया है।  ModalReference ModalReference क्लोजसक्सेस Book क्लोजसक्सेस मॉडल सर्विस शो  जब ModalReference सेवा के क्लोज़सक्सेस फ़ंक्शन को कॉल किया जाता है, तो यह मोडल डायलॉग को बंद कर देता है और उस इवेंट के ग्राहकों को नई बनाई गई पुस्तक को पास करते हुए एक RxJS इवेंट को ट्रिगर करता है। ऊपर दिए गए स्क्रीनशॉट में, हमारे कॉलबैक फ़ंक्शन का   पैरामीटर नई बनाई गई पुस्तक है जो हमें मोडल डायलॉग से प्राप्त हुई है, इसलिए हम इसे यूआई में दिखाने के लिए बस इसे अपनी   सरणी में जोड़ते हैं। न्यूबुक किताबों की  3. मॉडल डायलॉग्स को डेटा पास करना  ऐसे कुछ मामले हैं जहां आपको कुछ डेटा को मोडल डायलॉग में पास करने की आवश्यकता होती है। उदाहरण के लिए, यदि हम सूची से किसी पुस्तक को संपादित करना चाहते हैं, तो हम उस पुस्तक रिकॉर्ड को मोडल डायलॉग में पास कर सकते हैं जिसे हम संपादित करना चाहते हैं ताकि प्रारंभिक डेटा प्राप्त हो सके जिसे हम संशोधित करना चाहते हैं।  आइए पंक्ति डेटा को संपादित करने के लिए तालिका पंक्तियों में एक बटन जोड़कर प्रारंभ करें:   तालिका की प्रत्येक पंक्ति में संपादन बटन के साथ यूआई इस प्रकार दिखता है:     फ़ंक्शन में केवल एक महत्वपूर्ण अंतर के साथ   फ़ंक्शन के समान ही कोड होता है। यह उस पुस्तक को पास करता है जिसे हम संवाद विकल्पों की   संपत्ति का उपयोग करके मोडल संवाद में संपादित करना चाहते हैं।  एडिटबुक क्रिएटबुक मॉडल  मॉडल प्रॉपर्टी का उपयोग करके हम जिस पैरामीटर को   डायलॉग में पास करते हैं, वह डायलॉग के अंदर उपयोग किए जाने वाले घटक में इसके   प्रॉपर्टी के माध्यम से   सेवा में उपलब्ध हो जाता है।  मोडल config.model ModalReference  ऊपर दिए गए स्क्रीनशॉट में, हम पारित पैरामीटर की प्रतिलिपि बना रहे हैं और इसे   घटक की   प्रॉपर्टी में असाइन कर रहे हैं।   ऑब्जेक्ट की   संपत्ति संदर्भ द्वारा पारित की जाती है, इसलिए उस ऑब्जेक्ट के गुणों में हम जो भी परिवर्तन करते हैं वह तालिका में प्रतिबिंबित होगा जहां हम पुस्तकों की सूची दिखाते हैं। हम इसे कॉपी क्यों करते हैं इसका कारण तालिका में पंक्ति को तब तक संशोधित नहीं करना है जब तक उपयोगकर्ता "सहेजें" बटन पर क्लिक नहीं करता। यदि उपयोगकर्ता "रद्द करें" बटन पर क्लिक करता है, तो तालिका डेटा अपडेट नहीं किया जाएगा। CreateEditBookComponent पुस्तक ModalReference.config मॉडल  पुस्तक संपादित करें मोडल संवाद इस प्रकार दिखता है:   निष्कर्ष  शुरुआत से एंगुलर के लिए एक मोडल डायलॉग बनाना आसान नहीं है, लेकिन हमारी मोडल डायलॉग लाइब्रेरी के साथ यह बहुत आसान है। हमने लाइब्रेरी को कैसे सेट अप करें और अपने प्रोजेक्ट में मोडल डायलॉग दिखाने के लिए इसका उपयोग कैसे करें, इसके बारे में जाना। हमने संवादों के अधिकांश बुनियादी उपयोग के मामलों और सुविधाओं का अध्ययन किया, लेकिन @डेवलपर-पार्टनर्स/एनजीएक्स-मोडल-डायलॉग लाइब्रेरी में कई अन्य विशेषताएं हैं जो आपको अपनी वास्तविक परियोजनाओं में उपयोगी लग सकती हैं।   यहाँ भी प्रकाशित किया गया।  कृपया इसके बारे में अधिक जानने के लिए नीचे दिए गए लिंक का अनुसरण करें:   @डेवलपर-पार्टनर/एनजीएक्स-मोडल-डायलॉग  यदि आप अपने मोडल संवादों में एक अच्छा लोडिंग स्पिनर दिखाना चाहते हैं, तो कृपया एंगुलर में लोडिंग स्पिनर बनाने के बारे में हमारा लेख देखें:   एंगुलर में लोडिंग स्पिनर कैसे बनाएं

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This writer has a vested interest be it monetary, business, or otherwise, with 1 or more of the products or companies mentioned within.

Learn More

यह ऑडियो कहानी की मूल भाषा में निर्मित है!

एंगुलर में एक मॉडल डायलॉग कैसे दिखाएं

About Author

टिप्पणियाँ

लेबल

इस लेख में चित्रित किया गया था

Related Stories

He/Him/Master of Discovery

10 Reasons Why Publishing on HackerNoon Will Skyrocket Your Reach and Impact

फ़ोरम से फ़ीड तक: सोशल मीडिया एल्गोरिदम डिजिटल इंटरैक्शन को कैसे आकार देते हैं

HackerNoon एक बहुभाषी प्लेटफ़ॉर्म है: सभी शीर्ष कहानियाँ अब 13 भाषाओं में उपलब्ध हैं

He/Him/Master of Discovery

10 Reasons Why Publishing on HackerNoon Will Skyrocket Your Reach and Impact

फ़ोरम से फ़ीड तक: सोशल मीडिया एल्गोरिदम डिजिटल इंटरैक्शन को कैसे आकार देते हैं

HackerNoon एक बहुभाषी प्लेटफ़ॉर्म है: सभी शीर्ष कहानियाँ अब 13 भाषाओं में उपलब्ध हैं

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps