HI
RU
EN
ES
ZH
FR
DE
PT
AR
यह सवाल Stack Overflow (और आपके दिमाग) को क्यों उड़ा रहा है?
\nआप अपना पहला Angular प्रोजेक्ट लिख रहे हैं। आप एक कंपोनेंट बनाते हैं, उस पर @Component डेकोरेटर लगाते हैं — सब कुछ काम करता है। फिर आप किसी और के कोड में @Directive देखते हैं और सोचते हैं: "क्यों? यह तो वही बात है?" स्पॉइलर: नहीं, यह वही बात नहीं है। लेकिन 90% शुरुआती लोगों में भ्रम पैदा होता है।
प्रश्न "Angular में @Directive बनाम @Component" ने Stack Overflow पर हज़ारों व्यूज़ बिना किसी कारण के नहीं बटोरे हैं। आइए एक बार और हमेशा के लिए समझ लें कि अंतर क्या है, कब क्या उपयोग करना है और इंटरव्यू में बेवकूफ कैसे नहीं बनना है। चलिए शुरू करते हैं!
\n\n@Component क्या है? (स्पॉइलर: यह भी @Directive है)
\nशुरुआत के लिए — पर्दाफाश। @Component, @Directive का एक उपप्रकार है। हाँ, आपने सही सुना। Angular में कोई भी कंपोनेंट एक डायरेक्टिव है। लेकिन एक महत्वपूर्ण अंतर के साथ: कंपोनेंट के पास एक टेम्पलेट (template) होता है।
डेकोरेटर @Component @Directive से सब कुछ प्राप्त करता है और अपनी "विशेषता" जोड़ता है — HTML रेंडर करने की क्षमता। अगर डायरेक्टिव "व्यवहार" है, तो कंपोनेंट "व्यवहार + इंटरफ़ेस का एक टुकड़ा" है।
TypeScript में एक सरल कंपोनेंट का उदाहरण
\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'app-hello',\n template: `<h1>नमस्ते, {{name}}!</h1>`,\n styles: ['h1 { color: blue; }']\n})\nexport class HelloComponent {\n name: string = 'दुनिया';\n}\nयहाँ HelloComponent एक पूर्ण कंपोनेंट है। इसका अपना टेम्पलेट, स्टाइल और लॉजिक है। इसका उपयोग किसी अन्य टेम्पलेट में <app-hello></app-hello> के रूप में किया जा सकता है।
@Directive क्या है? (शुद्ध व्यवहार)
\nडायरेक्टिव एक क्लास है जिसमें @Directive डेकोरेटर होता है, जो मौजूदा DOM एलिमेंट के व्यवहार या स्वरूप को बदलता है। डायरेक्टिव का अपना कोई टेम्पलेट नहीं होता। यह कोई नया एलिमेंट नहीं बनाता — यह पहले से मौजूद एलिमेंट से "जुड़" जाता है।
Angular में तीन प्रकार की डायरेक्टिव होती हैं:
\n- \n
- कंपोनेंट्स (हाँ, वे भी डायरेक्टिव हैं) — टेम्पलेट के साथ। \n
- स्ट्रक्चरल डायरेक्टिव — DOM की संरचना बदलती हैं (
*ngIf,*ngFor)। \n - एट्रीब्यूट डायरेक्टिव — एलिमेंट का स्वरूप या व्यवहार बदलती हैं (
ngClass,ngStyle)। \n
TypeScript में एक एट्रीब्यूट डायरेक्टिव का उदाहरण
\nimport { Directive, ElementRef, HostListener } from '@angular/core';\n\n@Directive({\n selector: '[appHighlight]'\n})\nexport class HighlightDirective {\n constructor(private el: ElementRef) {}\n\n @HostListener('mouseenter') onMouseEnter() {\n this.el.nativeElement.style.backgroundColor = 'yellow';\n }\n\n @HostListener('mouseleave') onMouseLeave() {\n this.el.nativeElement.style.backgroundColor = null;\n }\n}\nयह डायरेक्टिव माउस होवर करने पर एलिमेंट को पीले रंग में हाइलाइट करती है। यह कोई नया DOM नोड नहीं बनाती — यह मौजूदा एलिमेंट को "संशोधित" करती है। इसका उपयोग इस प्रकार किया जाता है: <div appHighlight>मुझ पर होवर करें</div>।
@Directive बनाम @Component के मुख्य अंतर
\nआइए इसे स्पष्ट रूप से समझते हैं। यहाँ एक तालिका है जो आपको अंतर को हमेशा के लिए याद रखने में मदद करेगी:
\n\n| विशेषता | \n@Component | \n@Directive | \n
|---|---|---|
| टेम्पलेट (template) की उपलब्धता | \n✅ हाँ, अनिवार्य | \n❌ नहीं | \n
| नया DOM एलिमेंट बनाता है | \n✅ हाँ (सेलेक्टर के माध्यम से) | \n❌ नहीं (मौजूदा पर लागू होता है) | \n
| स्टाइल (styles) की उपलब्धता | \n✅ हाँ, अलग किया जा सकता है | \n❌
ब्लॉगपुस्तक अनुशंसाएँयह भी पढ़ें
JavaScript पोर्टफोलियो के लिए बेहतरीन प्रोजेक्ट्स: शुरुआत से प्रोफेशनल तक
C++ अनुप्रयोगों की निगरानी: उत्पादन के लिए मीट्रिक और अलर्ट
Swift पर माइक्रोसर्विसेज़: iOS/macOS के लिए आर्किटेक्चर और अभ्यास
Go इंटरव्यू कैसे पास करें: शीर्ष प्रश्न और उत्तर
2024 में वेब डेवलपमेंट के लिए 10 सर्वश्रेष्ठ TypeScript फ्रेमवर्क
|
