परिचय

एंगुलर 18.1 के आगमन के साथ, यह संस्करण कंपाइलर के लिए एक रोमांचक नई सुविधा पेश करता है: एक या अधिक टेम्पलेट चर घोषित करने की क्षमता।
इस सुविधा का उपयोग कैसे किया जाता है, और विभिन्न उपयोग के मामले क्या हैं?

इस लेख का उद्देश्य उत्तर देना है।

कंपाइलर की नवीनतम सुविधा: @let

एंगुलर के नवीनतम संस्करणों के साथ, टीम ने कंपाइलर में नई कार्यक्षमता पेश की है, और यह कार्यक्षमता @-सिंटैक्स में तब्दील हो जाती है।

इस तरह नया नियंत्रण प्रवाह सिंटैक्स अस्तित्व में आया

• @अगर
• @के लिए
• @बदलना

और, हाल ही में, @let

एक सामान्य नियम के रूप में, टेम्पलेट वैरिएबल बनाने का सबसे आसान तरीका

• *ngIf संरचनात्मक निर्देश कीवर्ड के साथ कीवर्ड

या नए नियंत्रण प्रवाह सिंटैक्स का उपयोग कर रहे हैं

• @if जैसे कीवर्ड के साथ

  {{ user.name }}



@if(user$ |async; as user){
  
{{ user.name }}
}

इस उपयोगी सुविधा ने हमें बाद में टेम्पलेट में उपयोग के लिए एसिंक पाइप के परिणाम को एक वेरिएबल में संग्रहीत करने की अनुमति दी।

हालाँकि, यह वाक्यविन्यास कुछ प्रश्न उठाता है। यहां, शर्त यह जांचती है कि क्या एसिंक पाइप का रिटर्न सत्य है, और इसलिए क्या रिटर्न मान जावास्क्रिप्ट में गलत माने गए किसी भी मान से अलग है।

यदि रिटर्न एक ऑब्जेक्ट या सरणी है तो यह स्थिति वास्तव में अच्छी तरह से काम करेगी।

लेकिन यदि रिटर्न एक संख्या है और विशेष रूप से संख्या 0

@if(((numbers$ |async) !=== undefined || (numbers$ |async) !=== null) ; as myNumber){
  
{{ myNumber }}
}

यह वह जगह है जहां @let आता है।

@let किसी शर्त की जांच नहीं करता है, यह आपको सरल तरीके से एक स्थानीय टेम्पलेट वैरिएबल घोषित करने की अनुमति देता है

इसलिए ऊपर दिया गया कोड उदाहरण लिखने में बहुत सरल और अधिक सुंदर हो गया है

@let myNumber = (numbers$ | async) ?? 0;
{{ myNumber }}

इस तरह myNumber वेरिएबल हमेशा प्रदर्शित किया जाएगा।

@let का उपयोग करने के विभिन्न तरीके

परिवर्तनीय घोषणा के साथ सबसे क्लासिक परिदृश्यों में से एक एक जटिल अभिव्यक्ति के परिणाम को संग्रहीत करना है।

किसी स्थिति में किसी फ़ंक्शन का उपयोग करना हमेशा अनुचित रहा है। किसी स्थिति में किसी फ़ंक्शन के उपयोग का प्रदर्शन पर इस अर्थ में प्रभाव पड़ा कि माउस की थोड़ी सी भी हलचल, या टेम्पलेट में बदलाव पर, फ़ंक्शन का पुनर्मूल्यांकन किया गया।

@let, जैसा कि ऊपर वर्णित है, मूल्यांकन नहीं करता है, बल्कि केवल एक स्थानीय चर घोषित करता है। इस चर का पुनर्मूल्यांकन तभी किया जाएगा जब इसकी कोई निर्भरता बदल जाएगी। इसलिए जटिल अभिव्यक्ति जैसे भावों के लिए किसी फ़ंक्शन को कॉल करना कोई बुरा विचार नहीं है।

@for(user of users(); track user.id) { @let isAdmin = checkIfAdmin(user);
• User is admin: {{ isAdmin }}
}

संकेतों के साथ @let का प्रयोग करें

@let सिग्नल के साथ संगत है, और इसका उपयोग निम्नानुसार किया जाता है

@let userColor = user().preferences?.colors?.primaryColor || 'white';
user favorite color is {{ userColor }}

@let और जावास्क्रिप्ट अभिव्यक्ति

जैसा कि आप देख सकते हैं, @let का उपयोग किसी भी प्रकार की जावास्क्रिप्ट अभिव्यक्ति का मूल्यांकन करने के लिए किया जा सकता है, उदाहरण के लिए, किसी वर्ग की तात्कालिकता को छोड़कर

इस तरह, अंकगणित ऑपरेटरों की व्याख्या की जाती है और कई चर को कई अलग-अलग रेखाओं पर या सिर्फ एक पंक्ति पर घोषित किया जा सकता है।

  
    @for (score of scores(); track $index) {
        @let total = total   score, max = calcMax(score);
        
final score: {{ total }}
    }

अन्य बढ़िया चीज़ें जो @let लाता है

जैसा कि ऊपर वर्णित है, @let का व्यवहार जावास्क्रिप्ट में Let के व्यवहार के समान है, जिसके निम्नलिखित लाभ हैं

• स्कोप जावास्क्रिप्ट में लेट स्कोप की तरह काम करता है
• टेम्पलेट में बेहतर टाइपिंग हस्तक्षेप
• यदि घोषित होने से पहले एक वेरिएबल (लेट) का उपयोग किया जाता है तो एक त्रुटि उत्पन्न होती है