एंगुलर में कस्टम निर्देश कैसे बनाएं

एंगुलर की प्रमुख विशेषताओं में से एक निर्देश है। कोणीय निर्देश आपके लिए DOM तत्वों में व्यवहार जोड़ने का एक तरीका है। एंगुलर विभिन्न प्रकार के अंतर्निहित निर्देश प्रदान करता है, और आप इस मजबूत ढांचे में कस्टम निर्देश भी बना सकते हैं।

निर्देश क्या हैं?

निर्देश कस्टम कोड हैं जिनका उपयोग एंगुलर HTML तत्व के व्यवहार या उपस्थिति को संशोधित करने के लिए करता है। आप ईवेंट श्रोताओं को जोड़ने, DOM बदलने, या तत्वों को दिखाने या छिपाने के लिए निर्देशों का उपयोग कर सकते हैं।

ये दो प्रकार के होते हैं एंगुलर में अंतर्निहित निर्देश, संरचनात्मक और विशेषता। संरचनात्मक निर्देश DOM की संरचना को बदलते हैं, जबकि विशेषता निर्देश किसी तत्व की उपस्थिति या व्यवहार को बदलते हैं। निर्देश कोणीय घटकों की कार्यक्षमता को बढ़ाने का एक शक्तिशाली तरीका है।

निर्देशों के लाभ

एंगुलर में निर्देशों का उपयोग करने के कुछ लाभ यहां दिए गए हैं:

• पुनर्प्रयोग: आप कई घटकों में निर्देशों का उपयोग कर सकते हैं, जिससे आपका समय और प्रयास बचता है।
instagram viewer
• तानाना: आप नई कार्यक्षमता जोड़ने के लिए निर्देशों का विस्तार कर सकते हैं, जिससे आपके घटक अधिक शक्तिशाली हो जाएंगे।
• FLEXIBILITY: निर्देशों का उपयोग करके, आप किसी तत्व के व्यवहार या स्वरूप को विभिन्न तरीकों से संशोधित कर सकते हैं, जिससे आपको अपने एप्लिकेशन बनाते समय बहुत अधिक लचीलापन मिलता है।

अपना कोणीय अनुप्रयोग सेट करना

एंगुलर एप्लिकेशन सेट करने के लिए, अपने टर्मिनल में निम्नलिखित कोड चलाकर एंगुलर सीएलआई स्थापित करें:

npm install -g @angular/cli

एंगुलर सीएलआई स्थापित करने के बाद, निम्नलिखित कमांड चलाकर एक एंगुलर प्रोजेक्ट बनाएं:

ng new custom-directives-app

ऊपर दिए गए कमांड को चलाने से नाम का एक एंगुलर प्रोजेक्ट तैयार हो जाएगा कस्टम-निर्देश-ऐप.

एक कस्टम निर्देश बनाना

अब आपके पास एक Angular प्रोजेक्ट है और आप अपने कस्टम निर्देश बनाना शुरू कर सकते हैं। एक टाइपस्क्रिप्ट फ़ाइल बनाएं और उससे सजाए गए वर्ग को परिभाषित करें @निर्देश डेकोरेटर.

@निर्देश डेकोरेटर एक टाइपस्क्रिप्ट डेकोरेटर है जिसका उपयोग कस्टम निर्देश बनाने के लिए किया जाता है। अब एक बनाएं हाइलाइट.निर्देश.ts फ़ाइल में स्रोत/ऐप निर्देशिका। इस फ़ाइल में, आप कस्टम निर्देश बनाएंगे प्रमुखता से दिखाना.

उदाहरण के लिए:

import { Directive } from"@angular/core";
@Directive({
 selector: "[myHighlight]",
})
exportclassHighlightDirective{
constructor() {}
}

उपरोक्त कोड ब्लॉक आयात करता है आदेश से डेकोरेटर @कोणीय/कोर मापांक। @निर्देश डेकोरेटर सजाता है हाइलाइटनिर्देश कक्षा। यह किसी वस्तु को तर्क के रूप में लेता है चयनकर्ता संपत्ति।

इस स्थिति में, आप सेट करें चयनकर्ता संपत्ति को [मेरी हाइलाइट] मतलब आप इस निर्देश को जोड़कर अपने टेम्पलेट्स पर लागू कर सकते हैं मेरी हाइलाइट किसी तत्व का गुणधर्म।

अपने टेम्प्लेट में निर्देश का उपयोग कैसे करें इसका एक उदाहरण यहां दिया गया है:

Some text</p>
</main>

निर्देश में व्यवहार जोड़ना

अब आपने सफलतापूर्वक एक निर्देश बना लिया है। अगला कदम निर्देश में एक व्यवहार जोड़ना है ताकि यह DOM में हेरफेर कर सके। आपको इसकी आवश्यकता होगी एलिमेंटरेफ किसी निर्देश में व्यवहार जोड़ने के लिए @angular/core से।

आप ElementRef को निर्देश के कंस्ट्रक्टर में इंजेक्ट करेंगे। ElementRef एक दृश्य के अंदर मूल तत्व के चारों ओर एक आवरण है।

यहां एक उदाहरण दिया गया है कि आप किसी निर्देश में कोई व्यवहार कैसे जोड़ते हैं:

import { Directive, ElementRef } from"@angular/core";
@Directive({
 selector: "[myHighlight]"
})
exportclassHighlightDirective{
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor = 'lightblue';
 }
}

इस उदाहरण में, का कंस्ट्रक्टर हाइलाइटनिर्देश क्लास एक ElementRef पैरामीटर लेता है, जिसे Angular स्वचालित रूप से इंजेक्ट करता है। ElementRef अंतर्निहित DOM तत्व तक पहुंच प्रदान करता है।

का उपयोग करते हुए यह.तत्व.मूलतत्व संपत्ति, आप के मूल DOM तत्व तक पहुँचते हैं तत्व पैरामीटर. फिर आप घटक का पृष्ठभूमि रंग सेट करें हल्का नीला रंग का उपयोग शैली संपत्ति। इसका मतलब यह है कि आप जो भी तत्व लागू करते हैं मेरी हाइलाइट निर्देश की पृष्ठभूमि हल्के नीले रंग की होगी।

निर्देश को कार्यात्मक बनाने के लिए, सुनिश्चित करें कि आप इसे आयात और घोषित करें ऐप.मॉड्यूल.ts फ़ाइल।

उदाहरण के लिए:

import { NgModule } from'@angular/core';
import { BrowserModule } from'@angular/platform-browser';
import { AppRoutingModule } from'./app-routing.module';
import { AppComponent } from'./app.component';
import { HighlightDirective } from'./highlight.directive';
@NgModule({
 declarations: [
 AppComponent,
 HighlightDirective,
 ],
 imports: [
 BrowserModule,
 AppRoutingModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
exportclassAppModule{ }

अब आप तत्वों पर myHighlight निर्देश लागू कर सकते हैं आपके कोणीय घटकों में.

Some text</p>
</main>

यह जांचने के लिए कि निर्देश कार्यशील है या नहीं, अपने एप्लिकेशन को डेवलपमेंट सर्वर पर चलाएँ। आप अपने टर्मिनल में निम्नलिखित कमांड चलाकर ऐसा कर सकते हैं:

ng serve

कमांड चलाने के बाद, नेविगेट करें http://localhost: 4200/ अपने वेब ब्राउज़र पर, और आपको एक इंटरफ़ेस दिखाई देगा जो नीचे दी गई छवि जैसा दिखता है।

कोणीय अंतर्निर्मित निर्देश तत्व उपस्थिति को बदलने के लिए मान स्वीकार करते हैं, लेकिन कस्टम निर्देश मेरी हाइलाइट नहीं करता। आप उस मान को स्वीकार करने के लिए निर्देश को कॉन्फ़िगर कर सकते हैं जिसका उपयोग यह टेम्पलेट के पृष्ठभूमि रंग को गतिशील रूप से सेट करने के लिए करेगा।

ऐसा करने के लिए, कोड को इसमें बदलें हाइलाइट.निर्देश.ts इसके साथ फ़ाइल करें:

import { Directive, ElementRef, Input } from"@angular/core";
@Directive({
 selector: "[myHighlight]"
})
exportclassHighlightDirective{
 @Input() set myHighlight(color: string) {
this.element.nativeElement.style.backgroundColor = color;
 }
constructor(private element: ElementRef) { 
 }
}

उपरोक्त कोड ब्लॉक में, हाइलाइटनिर्देश क्लास में एक सेटर विधि होती है जिसे कहा जाता है मेरी हाइलाइट. यह विधि एक लेती है रंग प्रकार स्ट्रिंग का पैरामीटर. आप सेटर विधि से सजाएँ @इनपुट डेकोरेटर, आपको मूल घटक से निर्देश में रंग मान पारित करने की अनुमति देता है।

अब आप myHighlight निर्देश में एक मान पास करके पृष्ठभूमि का रंग निर्धारित कर सकते हैं।

उदाहरण के लिए:

'pink'>Some text</p>
</main>

एक कस्टम संरचनात्मक निर्देश बनाना

पिछले अनुभागों में, आपने सीखा है कि अपने टेम्पलेट में कस्टम विशेषता निर्देश कैसे बनाएं, व्यवहार जोड़ें और लागू करें। विशेषता निर्देश DOM तत्वों की उपस्थिति को बदलते हैं, जबकि संरचनात्मक निर्देश DOM में तत्वों को जोड़ते, हटाते या स्थानांतरित करते हैं।

कोणीय दो संरचनात्मक निर्देश प्रदान करता है, ngFor और ngIf. ngFor निर्देश एक संग्रह (सरणी) में प्रत्येक आइटम के लिए एक टेम्पलेट प्रस्तुत करता है, जबकि ngIf सशर्त प्रतिपादन को संभालता है।

इस अनुभाग में, आप एक कस्टम संरचनात्मक निर्देश बनाएंगे जो की तरह कार्य करता है ngIf निर्देश. ऐसा करने के लिए, एक बनाएं शर्त.निर्देश.ts फ़ाइल।

में शर्त.निर्देश.ts फ़ाइल, यह कोड लिखें:

import { Directive, Input, TemplateRef, ViewContainerRef } from'@angular/core'
@Directive({
 selector: "[condition]"
})
exportclassConditionDirective{
 @Input() set condition(arg: boolean) {
if(arg) {
this.viewContainer.createEmbeddedView(this.template)
 } else {
this.viewContainer.clear();
 }
 }
constructor(
 private template: TemplateRef, 
 private viewContainer: ViewContainerRef 
 ) {}
}

यह कोड ब्लॉक आपको इसे लागू करके तत्वों को सशर्त रूप से प्रस्तुत करने की अनुमति देता है स्थिति किसी तत्व को निर्देश देना और मूल घटक से बूलियन मान पास करना।

के कंस्ट्रक्टर में शर्त निर्देश क्लास, आप इसका एक उदाहरण इंजेक्ट करते हैं टेम्पलेटRef और ViewContainerRef. TemplateRef निर्देश से जुड़े टेम्पलेट का प्रतिनिधित्व करता है, और ViewContainerRef उस कंटेनर का प्रतिनिधित्व करता है जहां एप्लिकेशन दृश्य प्रस्तुत करता है।

कंडीशनडायरेक्टिव क्लास सेटर विधि arg पैरामीटर की जांच करने के लिए if else स्टेटमेंट का उपयोग करती है। यदि पैरामीटर सत्य है तो निर्देश दिए गए टेम्पलेट का उपयोग करके एक एम्बेडेड दृश्य बनाता है। एंबेडेड व्यू बनाएं ViewContainerRef क्लास की विधि DOM में दृश्य बनाती और प्रस्तुत करती है।

यदि पैरामीटर है असत्य, निर्देश का उपयोग करके दृश्य कंटेनर को साफ़ करता है स्पष्ट ViewContainerRef वर्ग की विधि। यह DOM से पहले प्रस्तुत किए गए किसी भी दृश्य को हटा देता है।

निर्देश बनाने के बाद, इसे आयात करके और घोषित करके अपने प्रोजेक्ट में पंजीकृत करें ऐप.मॉड्यूल.ts फ़ाइल। ऐसा करने के बाद, आप अपने टेम्प्लेट में निर्देश का उपयोग शुरू कर सकते हैं।

अपने टेम्प्लेट में इसका उपयोग कैसे करें इसका एक उदाहरण यहां दिया गया है:

"true">Hello There!!!</p>
</main>

अब आप कस्टम निर्देश बना सकते हैं

एंगुलर में कस्टम निर्देश DOM में हेरफेर करने और आपके टेम्पलेट्स में गतिशील व्यवहार जोड़ने का एक शक्तिशाली तरीका प्रदान करते हैं। आपने सीखा है कि अपने Angular अनुप्रयोगों में कस्टम विशेषताएँ और संरचनात्मक निर्देश कैसे बनाएं और लागू करें। कस्टम निर्देशों को बनाने और उपयोग करने का तरीका समझकर, आप एंगुलर की क्षमताओं का पूरा लाभ उठा सकते हैं।