यदि आप एंगुलर में गतिशील रूप से बनाए गए घटकों का उपयोग कर रहे हैं, तो संभवतः आपको जरूरत पड़ने पर पैरेंट और चाइल्ड घटकों के बीच जानकारी पारित करना मुश्किल हो जाएगा। आपको मूल में जानकारी प्रदान करनी होगी, और फिर इसे चाइल्ड घटक में इंजेक्ट करना होगा। हालाँकि ऐसा करना आवश्यक रूप से कठिन नहीं है, इसके परिणामस्वरूप बहुत सारे अतिरिक्त बॉयलरप्लेट कोड उत्पन्न होते हैं।  यह बहुत बेहतर होगा यदि हम   डेकोरेटर का उपयोग पहले की तरह ही कर सकें। अच्छा अंदाजा लगाए? एंगुलर सोलहवें संस्करण के अनुसार इस सटीक कार्य को करने का समर्थन करता है। इस पोस्ट में, मैं आपको दिखाऊंगा कि कैसे। ठीक है, चलिए इस पर आते हैं। @Input   https://youtu.be/MT2JP8pn1qU?embedable=true  कोणीय इंजेक्टर का उपयोग करके पुराने तरीके से डेटा पास करना  सबसे पहले, आइए देखें कि हम पेरेंट से गतिशील रूप से बनाए गए घटकों को डेटा कैसे पास करते थे। यहां, इस उदाहरण में, घटक टेम्पलेट के भीतर, हमारे पास हमारा   है, और हम इसे अपने प्लेयर घटक को भेज रहे हैं। *ngComponentOutlet  इस मामले में, हम एक कस्टम चाइल्ड इंजेक्टर भी पास कर रहे हैं, और इस तरह हम पहले चाइल्ड कंपोनेंट के लिए डेटा इंजेक्ट करेंगे।  मुख्य.ts   @Component({ selector: 'app-root', template: ` <ng-container *ngComponentOutlet="playerComponent; injector: childInjector"></ng-container> ` }) export class App { protected playerComponent = PlayerComponent; }  और इस चाइल्ड इंजेक्टर को बनाने के लिए, हमें एक प्रॉपर्टी बनाने की आवश्यकता थी ताकि इसे सेट किया जा सके और फिर टेम्पलेट के भीतर उपयोग किया जा सके।   export class App { protected childInjector?: Injector; ... }  फिर, हमें कंस्ट्रक्टर के भीतर कोणीय कोर से इंजेक्टर में इंजेक्ट करने की आवश्यकता थी।   export class App { ... constructor(private injector: Injector) { } }  उसके बाद, हमें बच्चे को अपना प्लेयर टोकन प्रदान करने के लिए क्रिएट विधि और प्रदाताओं की सरणी का उपयोग करके चाइल्ड इंजेक्टर सेट करने की आवश्यकता थी।   export class App { ... constructor(private injector: Injector) { this.childInjector = Injector.create({ providers: [ { provide: PlayerToken, useValue: this.player } ], parent: this.injector }); } }  और अंत में, चाइल्ड कंपोनेंट, हमारे प्लेयर कंपोनेंट में, हमें अपनी प्लेयर प्रॉपर्टी को कोणीय कोर से इंजेक्ट विधि के साथ सेट करने की आवश्यकता थी।  प्लेयर.घटक.ts   export class PlayerComponent { protected player?: Player = inject(PlayerToken); }  तो, यह सब एक साधारण प्लेयर ऑब्जेक्ट को एक गतिशील घटक में पास करने के लिए है। मेरा मतलब है, अगर यह एक गतिशील घटक नहीं होता, तो हम इसे बस एक   बनाते और प्लेयर डेटा ऑब्जेक्ट को पैरेंट में   से बांध देते। लेकिन यह एक गतिशील रूप से निर्मित घटक है, इसलिए हम ऐसा नहीं कर सकते, है ना? @Input @Input  ठीक है, एंगुलर सोलह के रूप में, हम वास्तव में इसके बजाय   s का उपयोग कर सकते हैं, और यह अब तक हमने जो देखा है उससे कहीं अधिक सरल है। @Input    इनपुट ऑब्जेक्ट का उपयोग करके डेटा को नए तरीके से पास करना *ngComponentOutlet  हम इसके बजाय इस प्लेयर प्रॉपर्टी को   में बदलकर शुरुआत करते हैं। और, यह बस हमारे प्लेयर इंटरफ़ेस में टाइप किया गया है। @Input  प्लेयर.घटक.ts   export class PlayerComponent { @Input() player?: Player; }  अब, हम इंजेक्ट विधि और प्लेयर टोकन आयात को हटा सकते हैं क्योंकि अब उनकी आवश्यकता नहीं है। फिर, अपने पैरेंट में वापस, टेम्पलेट में, हम इंजेक्टर को हटा सकते हैं, और इसके बजाय, इसे एक इनपुट ऑब्जेक्ट से बदल सकते हैं। हम इस ऑब्जेक्ट को किसी भी संख्या में इनपुट पर पास कर सकते हैं। इसलिए, यदि हमारे पास पाँच इनपुट हों, तो हम बस उनके नाम शामिल करेंगे, और फिर हमें जो भी डेटा चाहिए, उनमें से प्रत्येक को पास करेंगे।  लेकिन इस मामले में, हमारे चाइल्ड कंपोनेंट, प्लेयर पर केवल एक इनपुट है, इसलिए हमें इसे पास करने के लिए बस इतना ही चाहिए।  मुख्य.ts   @Component({ selector: 'app-root', template: ` <ng-container *ngComponentOutlet="playerComponent; inputs: { player }"></ng-container> ` })  अब, हम चाइल्ड इंजेक्टर को हटा सकते हैं। इसका मतलब है कि हम कंस्ट्रक्टर को पूरी तरह से हटा भी सकते हैं। और अंत में, हम कोणीय कोर से इंजेक्टर और प्लेयर टोकन आयात को हटा सकते हैं क्योंकि अब हम उनका उपयोग नहीं कर रहे हैं।   export class App { protected player: Player = { name: 'LeBron James', games: 1421, points: 38652, fieldGoalPercentage: 0.505, threePointPercentage: 0.345, imageName: 'lebron-james' }; protected playerComponent = PlayerComponent; }  और बस। हम देख सकते हैं कि हर चीज़ वैसे ही काम करती है जैसे पहले हुआ करती थी। इसलिए, इसे निकालना काफी आसान है और कोड भी कम है जो हमेशा बढ़िया होता है।  हालाँकि एक अजीब बात यह है कि   s समर्थित हैं,   s समर्थित नहीं हैं। एक अजीब सी बात है, लेकिन जो है वही है। उम्मीद है, वे भविष्य में समर्थन जोड़ेंगे क्योंकि यह बहुत उपयोगी भी होगा, लेकिन हमें बस इंतजार करना होगा और देखना होगा। @Input @Output  क्या आप इसे क्रियान्वित होते देखना चाहते हैं?  नीचे दिए गए स्टैकब्लिट्ज उदाहरण में इन तकनीकों के डेमो कोड और उदाहरण देखें। यदि आपका कोई प्रश्न या विचार है, तो टिप्पणी छोड़ने में संकोच न करें।   https://stackblitz.com/edit/stackblitz-starters-9xzkkf?ctl=1&embed=1&file=src%2Fmain.ts&embedable=true

Buy Me a Coffee

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

गतिशील रूप से निर्मित घटकों में डेटा पास करने के लिए Angular @Input का उपयोग कैसे करें

About Author

टिप्पणियाँ

लेबल

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

Related Stories

डिजिटल खानाबदोशों सुनो: थाईलैंड के नए डीटीवी वीज़ा के बारे में आपको क्या जानना चाहिए

जलयात्रा: डेटा झीलों के साथ उत्पादन-ग्रेड आरएजी अनुप्रयोगों का विकास

क्रिप्टो ग्रोथ: प्रभावी उपयोगकर्ता व्यक्तित्व बनाना

सफल क्लाउड माइग्रेशन के लिए संपूर्ण गाइड: रणनीतियाँ और सर्वोत्तम अभ्यास

डिजिटल खानाबदोशों सुनो: थाईलैंड के नए डीटीवी वीज़ा के बारे में आपको क्या जानना चाहिए

जलयात्रा: डेटा झीलों के साथ उत्पादन-ग्रेड आरएजी अनुप्रयोगों का विकास

क्रिप्टो ग्रोथ: प्रभावी उपयोगकर्ता व्यक्तित्व बनाना

सफल क्लाउड माइग्रेशन के लिए संपूर्ण गाइड: रणनीतियाँ और सर्वोत्तम अभ्यास

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps