कोणीय 2 क्यों तारांकन (*)

Question

कोणीय 2 दस्तावेज़, * और टेम्पलेट में , हम जानते हैं कि * ngIf, * ngSwitch, * ngFor को ng-टेम्पलेट टैग में विस्तारित किया जा सकता है। मेरा सवाल यह है कि:

मुझे लगता है कि ngIfया ngForबिना *भी अनुवाद किया जा सकता है और कोणीय इंजन द्वारा टेम्प्लेट टैग में विस्तारित किया जा सकता है।

निम्नलिखित कोड

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

जैसा होगा वैसा ही होगा

<ng-template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"></hero-detail>
</ng-template>

तो *कोणीय 2 में एक अजीब प्रतीक तारांकन ( ) को डिजाइन करने में परेशान क्यों ?

Comments

लिंक से, हमने <template>टैग नहीं देखे क्योंकि *उपसर्ग सिंटैक्स ने हमें उन टैगों को छोड़ने और HTML तत्व पर सीधे ध्यान केंद्रित करने की अनुमति दी है जिन्हें हम शामिल कर रहे हैं, छोड़कर या दोहरा रहे हैं।

— तुषार

angular.io/docs/ts/latest/guide/…

— TGH

यह आपकी पसंद है कि आप सीधे टेम्प्लेट टैग का उपयोग करें, अन्य बुद्धिमान आप * का उपयोग कर सकते हैं जो आपके लिए टेम्प्लेट टैग का ध्यान रखता है। - स्रोत

— तुषार

Answer 1

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

डॉक्स से उद्धरण :

तारांकन "सिंटैक्टिक शुगर" है। यह लेखक और पाठक दोनों के लिए ngIf और ngFor को सरल बनाता है। हुड के तहत, कोणीय एक अधिक क्रिया रूप के साथ तारांकन संस्करण को प्रतिस्थापित करता है।

अगले दो ngIf उदाहरण प्रभावी रूप से समान हैं और हम या तो शैली में लिख सकते हैं:

<!-- Examples (A) and (B) are the same -->

<!-- (A) *ngIf paragraph -->
<p *ngIf="condition">
  Our heroes are true!
</p>

<!-- (B) [ngIf] with template -->
<template [ngIf]="condition">
  <p>
    Our heroes are true!
  </p>
</template>

Comments

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

— मैक्सिसकोडर

मेरा मतलब है कि इस चीनी को क्यों डिज़ाइन करें, क्यों केवल डिफ़ॉल्ट रूप से * का उपयोग करके विस्तार करें।

— मैक्सिसकोडर

कई कारण हैं जो मैं सोच सकता हूं: 1. ngIf="expression"कोई इनपुट बाइंडिंग नहीं है। यदि आपको DOM से वैल्यू मिलती है, तो यह एक स्ट्रिंग होगी। 2. फ्रेमवर्क के बारे में ngIfऔर अन्य विशेष मामले होने के बारे में जानना होगा । निश्चित रूप से, डीडीओ पर कहीं न कहीं एक बूलियन विशेषता को निर्दिष्ट करना, लेकिन आपको नियमित विशेषता और संरचनात्मक निर्देश चीनी के बीच अंतर जानने के लिए कोड / डॉक्स में देखना होगा। 3. वर्ग कोष्ठक, एरिक, कोष्ठक और उनमें से कमी स्पष्ट रूप से प्रचार करती है कि टेम्पलेट रीडर में क्या चल रहा है।

— Klaster_1

यह एनजी 1 में एनस्टरिस्क के बिना काम क्यों करता था, एनजी-अगर, एनजी-शो आदि लिखने के लिए?

— रबरडुकबैबिट

@RubberDuckRabbit क्योंकि ng1 में पूरी तरह से अलग बाध्यकारी कार्यान्वयन है। यह ng2 + के लिए पुन: डिज़ाइन किया गया था।

— Klaster_1

Answer 2

Angular2 एक विशेष प्रकार के निर्देश प्रदान करता है - संरचनात्मक निर्देश

<template>टैग पर संरचनात्मक निर्देश आधार हैं ।

इससे *पहले कि विशेषता चयनकर्ता इंगित करता है कि एक सामान्य विशेषता निर्देश या संपत्ति बंधन के बजाय एक संरचनात्मक निर्देश लागू किया जाना चाहिए। Angular2 आंतरिक रूप से एक स्पष्ट <template>टैग के लिए सिंटैक्स का विस्तार करता है ।

चूँकि फाइनल में वह <ng-container>तत्व भी है जिसका उपयोग <template>टैग के समान किया जा सकता है लेकिन अधिक सामान्य शॉर्ट-हैंड सिंटैक्स का समर्थन करता है। यह उदाहरण के लिए आवश्यक है जब दो संरचनात्मक निर्देशों को एक ही तत्व पर लागू किया जाना चाहिए, जो कि सहायक नहीं है।

<ng-container *ngIf="boolValue">
  <div *ngFor="let x of y"></div>
</ng-container>

Answer 3

कोणीय तत्व टेम्पलेट तत्वों को एक विशेष तरीके से व्यवहार करता है। *वाक्य रचना एक शॉर्टकट आप पूरे लेखन शून्य करने देता है <template>तत्व। मुझे दिखाते हैं कि यह कैसे काम करता है।

इसका उपयोग करना

*ngFor="let t of todos; let i=index"

डी-शक्कर में

template="ngFor: let t of todos; let i=index" 

कौन सी डी-शक्कर में

<template ngFor [ngForOf]="todos" .... ></template>

*इस कस्टम निर्देश और घटकों से अलग करने के लिए पूर्ववर्ती द्वारा ngFor, ngIf आदि जैसे कोणीय के संरचनात्मक निर्देश भी

यहाँ और देखें

https://vsavkin.com/angular-2-template-syntax-5f2ee9f13c6a#.rcffirs7a

Answer 4

से कोणीय डॉक्स :

HTML लेआउट के लिए संरचनात्मक निर्देश जिम्मेदार हैं। वे डोम की संरचना को आकार देते हैं या फिर से जोड़ते हैं, आमतौर पर तत्वों को जोड़कर, हटाकर या जोड़-तोड़ करके।

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

संरचनात्मक निर्देशों को पहचानना आसान है। एक तारांकन चिह्न (*) इस उदाहरण में निर्देश विशेषता नाम से पहले है।

<p *ngIf="userInput">{{username}}</p>

Answer 5

कभी-कभी आपको <a *ngIf="cond">उदाहरण की आवश्यकता हो सकती है , जब यह केवल एक टैग हो। कभी-कभी आप एक आवरण के रूप में वास्तविक टैग के बिना एनजीआई को कई टैग के आसपास रखना चाह सकते हैं जो आपको <template [ngIf]="cond">टैग की ओर ले जाता है । कैसे कोणीय को पता चल सकता है कि यह अंतिम परिणाम HTML में ngIf निर्देशक मालिक को प्रस्तुत करना चाहिए या नहीं? तो यह कोड को और अधिक स्पष्ट करने की तुलना में कुछ अधिक है। यह एक आवश्यक अंतर है।