कोणीय: निर्देशक चयनकर्ताओं की गैर-स्पष्ट विशेषताएं

यदि आपने कभी कोणीय निर्देश बनाए हैं, तो आपने संभवतः एक ऐसे निर्माण का उपयोग किया है जो चयनकर्ता के रूप में कोष्ठक का उपयोग करता है: ([]) । ऐसा दृष्टिकोण, हालांकि यह सबसे अधिक बार लागू होता है, केवल एक ही संभव नहीं है। वास्तव में, निर्देशों में उपयोग किए गए चयनकर्ता प्रोग्रामर को रचनात्मकता के लिए व्यापक गुंजाइश देते हैं। इस विचार को कार्रवाई में प्रदर्शित करने के लिए, सामग्री, जिसका अनुवाद आज हम प्रकाशित करते हैं, बाहरी लिंक के साथ काम करने के लिए डिज़ाइन किए गए निर्देश बनाने के लिए कार्यप्रणाली पर चर्चा करते हैं जो टेम्पलेट में हैं। विशेष रूप से, हम इस बारे में बात करेंगे कि आप साधारण एचटीएमएल तत्वों को कैसे पा सकते हैं, और यदि आवश्यक हो, तो उनमें से कुछ का चयन करें :not छद्म :not का उपयोग करके।

NgForm निर्देश

एक जटिल चयनकर्ता के एक उदाहरण पर विचार करने के लिए, ngForm निर्देश पर एक नज़र डालें:

 @Directive({ selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,ng-form,[ngForm]', }) 

यहाँ यह निम्नलिखित पर ध्यान देने योग्य है:

• निर्देश कई चयनकर्ताओं के लिए डिज़ाइन किया जा सकता है, जिन्हें अल्पविराम के साथ सूचीबद्ध किया जा सकता है।
• यहां आप HTML विशेषताओं (जैसे ngForm ) के साथ HTML लक्ष्य तत्वों (जैसे <form> ) को ngForm ।
• कुछ तत्वों को चयन से बाहर करने के लिए, आप का उपयोग कर सकते हैं :not छद्म :not ।

बाहरी लिंक के साथ काम करने के लिए एक निर्देश बनाना

बाहरी लिंक से हमारा मतलब है <a> टैग, जिसमें एक routerLink निर्देश नहीं है। पिछले उदाहरण का विश्लेषण करके हमने जो पाया, उसे देखते हुए, संबंधित चयनकर्ता को निम्नानुसार वर्णित किया जा सकता है:

 @Directive({ selector: 'a:not([routerLink])', }) 

इस चयनकर्ता की सुंदरता यह है कि हमें किसी ऐसी चीज़ के लिए विशेषता नाम बनाने की आवश्यकता नहीं है जिसे कुछ इकाई के विपरीत के रूप में वर्णित किया जा सकता है।

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

निर्देश को बाहरी लिंक पर लागू करने के परिणाम इस तरह दिखना चाहिए:

• लिंक एक अलग विंडो में खुलनी चाहिए।
• rel विशेषता को लिंक में जोड़ा जाना चाहिए, जो प्रदर्शन में सुधार करेगा और समाधान की सुरक्षा बढ़ाएगा।

ये दोनों लक्ष्य @HostBinding() के उपयोग के माध्यम से प्राप्त करने योग्य हैं:

 @Directive({ selector: 'a:not([routerLink])' }) export class ExternalLinkDirective { @HostBinding('rel') @Input() rel = 'noopener'; @HostBinding('target') @Input() target = '_blank'; } 

कृपया ध्यान दें कि अन्य बातों के अलावा, हमने @Input() डेकोरेटर का उपयोग करके गुणों को सजाया है, जो यदि आवश्यक हो, तो पुनर्वितरण के लिए संभावनाओं को खोलता है।

इस तरह के समाधान का एक और वैध कार्यान्वयन @Attribute() डेकोरेटर का उपयोग करना हो सकता है। यह दृष्टिकोण प्रदर्शन में थोड़ी वृद्धि देगा, क्योंकि, @Input() डेकोरेटर के विपरीत, @Input() का उपयोग करते समय @Attribute() संबंधित गुणों @Attribute() मानों की गणना केवल एक बार की जाती है, अर्थात, rel और target गुण लगातार परिवर्तन चक्र में जांच नहीं किए जाते हैं।

इस तकनीक के बारे में विवरण यहां पाया जा सकता है ।

परीक्षण निर्देशन

चलो एक सरल नेविगेशन ब्लॉक बनाते हैं जिसमें बाहरी संसाधनों के लिंक होते हैं:

 <nav> <a href="https://google.com">Google</a> <a href="https://bing.com">Bing</a> <a href="https://forbes.com">Forbes</a> </nav> 

यदि, Chrome डेवलपर के टूल का उपयोग करके, आप संबंधित HTML कोड देखते हैं, तो आप निम्नलिखित देख सकते हैं:


निर्देश को लागू करने के बाद नेविगेशन ब्लॉक का HTML कोड

यह वही है जो हमें चाहिए। निर्देश अतिरिक्त विशेषता चयनकर्ताओं की आवश्यकता के बिना काम करता है।

परिणाम

इस सामग्री से, आपने सीखा कि कोणीय निर्देशों के साथ काम करते समय, विशेषता चयनकर्ताओं का उपयोग करना आवश्यक नहीं है। यहां हमने पहले ngForm निर्देशन की जांच की, और फिर बाहरी लिंक के साथ काम करने के लिए डिज़ाइन किए गए अपने स्वयं के निर्देश को बनाने के लिए प्राप्त ज्ञान का उपयोग किया। हमें उम्मीद है कि आप इस तकनीक को उपयोगी पाएंगे।

प्रिय पाठकों! यदि आप कोणीय का उपयोग करके वेब परियोजनाओं के विकास के लिए किसी भी गैर-स्पष्ट तकनीकों से अवगत हैं, तो कृपया हमें उनके बारे में बताएं।