Angular कंपोनेंट टेम्पलेट में एलिमेंट कैसे चुनें: TypeScript के साथ पूर्ण गाइड

Angular में साधारण document.querySelector काम क्यों नहीं करता?

कल्पना करें: आप Angular में अपना पहला एप्लिकेशन लिख रहे हैं, और आपको कंपोनेंट टेम्पलेट में सीधे एक सामान्य <div> या <input> तक पहुँचने की आवश्यकता है। पहला विचार पुराने अच्छे document.querySelector का उपयोग करने का आता है। लेकिन समस्या यह है कि कंसोल में — null या undefined दिखाई देता है। परिचित लग रहा है?

Angular केवल DOM में हेरफेर करने के लिए एक लाइब्रेरी नहीं है। यह एक फ्रेमवर्क है जो वास्तविक DOM पर अपने स्वयं के एब्स्ट्रैक्शन के साथ काम करता है। ग्लोबल सेलेक्टर्स के माध्यम से एलिमेंट्स तक सीधी पहुँच फ्रेमवर्क की आर्किटेक्चर का उल्लंघन करती है, मेमोरी लीक और प्रदर्शन समस्याओं का कारण बन सकती है। लेकिन मुख्य कारण यह है कि Angular वर्चुअल DOM और Shadow DOM (एनकैप्सुलेशन रणनीति के आधार पर) का उपयोग करता है, इसलिए आपका document.querySelector कंपोनेंट के अंदर के एलिमेंट्स को देख ही नहीं पाता।

सौभाग्य से, Angular डेवलपर्स ने एक सुरुचिपूर्ण समाधान प्रदान किया है — ViewChild और ViewChildren डेकोरेटर। इस लेख में, हम TypeScript का उपयोग करके कंपोनेंट टेम्पलेट में एलिमेंट्स को सही तरीके से चुनने के तरीके पर चर्चा करेंगे, और सभी संभावित समस्याओं पर विचार करेंगे।

टेम्पलेट एलिमेंट्स तक पहुँचने के मुख्य तरीके

Angular में कंपोनेंट टेम्पलेट में एलिमेंट चुनने के तीन मुख्य दृष्टिकोण हैं:

\n
• टेम्पलेट रेफरेंस वेरिएबल्स (Template Reference Variables) — त्वरित पहुँच के लिए सबसे सरल तरीका
\n
• ViewChild डेकोरेटर — एक एलिमेंट या कंपोनेंट तक पहुँचने के लिए
\n
• ViewChildren डेकोरेटर — समान प्रकार के एलिमेंट्स के संग्रह तक पहुँचने के लिए
\n

इनमें से प्रत्येक दृष्टिकोण की अपनी विशेषताएँ हैं और विभिन्न परिदृश्यों में उपयोग किया जाता है। आइए इन्हें विस्तार से देखें।

1. टेम्पलेट रेफरेंस वेरिएबल्स: सबसे तेज़ तरीका

टेम्पलेट रेफरेंस वेरिएबल्स Angular का एक "लाइफहैक" है, जो आपको कंपोनेंट क्लास में कोड लिखे बिना सीधे टेम्पलेट में DOM एलिमेंट तक पहुँचने की अनुमति देता है। आप बस आवश्यक एलिमेंट पर #नामरेफरेंस लगाते हैं।

// component.html\n<input #myInput type="text" placeholder="टेक्स्ट दर्ज करें">\n<button (click)="focusInput(myInput)">इनपुट पर फोकस करें</button>

इस उदाहरण में, #myInput एक टेम्पलेट रेफरेंस वेरिएबल है। यह स्वचालित रूप से एक वेरिएबल बनाता है जिसे कंपोनेंट मेथड्स में पास किया जा सकता है। ध्यान दें: हम एलिमेंट को पास कर रहे हैं, न कि उसके मान को।

// component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-example',\n  templateUrl: './example.component.html'\n})\nexport class ExampleComponent {\n  focusInput(inputElement: HTMLInputElement): void {\n    inputElement.focus();\n    inputElement.style.borderColor = '#4CAF50';\n  }\n}

महत्वपूर्ण बिंदु: टेम्पलेट रेफरेंस वेरिएबल्स केवल टेम्पलेट की सीमा के भीतर ही उपलब्ध होते हैं। आप इन्हें सीधे कंपोनेंट क्लास में उपयोग नहीं कर सकते। इसके लिए डेकोरेटर्स की आवश्यकता होती है।

2. ViewChild: एक एलिमेंट तक पहुँच

@ViewChild डेकोरेटर कंपोनेंट क्लास से किसी एलिमेंट या चाइल्ड कंपोनेंट तक पहुँच प्राप्त करने का मुख्य उपकरण है। यह सेलेक्टर पर आधारित काम करता है: आप टेम्पलेट रेफरेंस, कंपोनेंट टाइप या CSS सेलेक्टर (सीमाओं के साथ) द्वारा खोज सकते हैं।

// component.ts\nimport { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';\n\n@Component({\n  selector: 'app-example',\n  template: `\n    <div #myDiv>यह एलिमेंट हम चुनेंगे</div>\n    <p #myParagraph>और यह भी</p>\n  `\n})\nexport class ExampleComponent implements AfterViewInit {\n  @ViewChild('myDiv') myDiv!: ElementRef;\n  @ViewChild('myParagraph') myParagraph!: ElementRef;\n\n  ngAfterViewInit(): void {\n    // महत्वपूर्ण! एलिमेंट्स तक पहुँच केवल व्यू इनिशियलाइज़ेशन के बाद ही संभव है\n    console.log(this.myDiv.nativeElement.textContent); // "यह एलिमेंट हम चुनेंगे"\n    this.myPara