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

यदि आप एंगुलर में गतिशील रूप से बनाए गए घटकों का उपयोग कर रहे हैं, तो संभवतः आपको जरूरत पड़ने पर पैरेंट और चाइल्ड घटकों के बीच जानकारी पारित करना मुश्किल हो जाएगा। आपको मूल में जानकारी प्रदान करनी होगी, और फिर इसे चाइल्ड घटक में इंजेक्ट करना होगा। हालाँकि ऐसा करना आवश्यक रूप से कठिन नहीं है, इसके परिणामस्वरूप बहुत सारे अतिरिक्त बॉयलरप्लेट कोड उत्पन्न होते हैं।

यह बहुत बेहतर होगा यदि हम @Input डेकोरेटर का उपयोग पहले की तरह ही कर सकें। अच्छा अंदाजा लगाए? एंगुलर सोलहवें संस्करण के अनुसार इस सटीक कार्य को करने का समर्थन करता है। इस पोस्ट में, मैं आपको दिखाऊंगा कि कैसे। ठीक है, चलिए इस पर आते हैं।

कोणीय इंजेक्टर का उपयोग करके पुराने तरीके से डेटा पास करना

सबसे पहले, आइए देखें कि हम पेरेंट से गतिशील रूप से बनाए गए घटकों को डेटा कैसे पास करते थे। यहां, इस उदाहरण में, घटक टेम्पलेट के भीतर, हमारे पास हमारा *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 से बांध देते। लेकिन यह एक गतिशील रूप से निर्मित घटक है, इसलिए हम ऐसा नहीं कर सकते, है ना?

ठीक है, एंगुलर सोलह के रूप में, हम वास्तव में इसके बजाय @Input s का उपयोग कर सकते हैं, और यह अब तक हमने जो देखा है उससे कहीं अधिक सरल है।

*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; }

और बस। हम देख सकते हैं कि हर चीज़ वैसे ही काम करती है जैसे पहले हुआ करती थी। इसलिए, इसे निकालना काफी आसान है और कोड भी कम है जो हमेशा बढ़िया होता है।

हालाँकि एक अजीब बात यह है कि @Input s समर्थित हैं, @Output s समर्थित नहीं हैं। एक अजीब सी बात है, लेकिन जो है वही है। उम्मीद है, वे भविष्य में समर्थन जोड़ेंगे क्योंकि यह बहुत उपयोगी भी होगा, लेकिन हमें बस इंतजार करना होगा और देखना होगा।

क्या आप इसे क्रियान्वित होते देखना चाहते हैं?

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