कोणीय 2 में कोष्ठक, कोष्ठक और तारांकन के बीच अंतर क्या है?

Question

मैं कोणीय वेबसाइट में कोणीय 1 से 2 त्वरित संदर्भ पढ़ रहा हूं , और एक बात जो मुझे पूरी तरह से समझ में नहीं आई थी वह इन विशेष वर्णों के बीच का अंतर था। उदाहरण के लिए जो तारांकन का उपयोग करता है:

<tr *ngFor="#movie of movies">
  <td>{{movie.title}}</td>
</tr>

मैं यहाँ समझता हूँ कि हैश (#) चिन्ह movieएक स्थानीय टेम्प्लेट चर के रूप में परिभाषित होता है, लेकिन ngForमाध्य से पहले तारांकन क्या करता है? और, क्या यह आवश्यक है?

अगला, कोष्ठक का उपयोग करने वाले उदाहरण हैं:

<a [routerLink]="['Movies']">Movies</a>

मैं कुछ हद तक समझता हूँ कि चारों ओर के कोष्ठक routerLinkउस HTML विशेषता / कोणीय निर्देश के साथ बाँधते हैं। क्या इसका मतलब यह है कि वे एक अभिव्यक्ति का मूल्यांकन करने के लिए कोणीय के लिए एक संकेतक हैं? जैसे कोणीय 1 में [id]="movieId"समतुल्य होगा id="movie-{{movieId}}"?

अंत में, कोष्ठक हैं:

<button (click)="toggleImage($event)">

क्या ये केवल DOM इवेंट्स के लिए उपयोग किए जाते हैं और क्या हम अन्य इवेंट्स का उपयोग कर सकते हैं (load)="someFn()"या जैसे (mouseenter)="someFn()"?

मुझे लगता है कि असली सवाल यह है कि क्या इन प्रतीकों का एंगुलर 2 में एक विशेष अर्थ है, और यह जानने का सबसे आसान तरीका क्या है कि प्रत्येक का उपयोग कब किया जाए ? धन्यवाद!!

Answer 1

सभी विवरण यहां देखे जा सकते हैं: https://angular.io/docs/ts/latest/guide/template-synxax.html

• directiveName- संरचनात्मक निर्देशों के लिए संक्षिप्त रूप है जहां लंबे रूप को केवल <template>टैग पर लागू किया जा सकता है । संक्षिप्त रूप उस तत्व को समाहित करता है, जहां यह एक में लागू होता है <template>।

• [prop]="value"गुणों के लिए ऑब्जेक्ट बाइंडिंग के लिए है ( @Input()एक कोणीय घटक या निर्देश या एक DOM तत्व की संपत्ति)।
  विशेष रूप हैं:

  • [class.className] इसे सक्षम / अक्षम करने के लिए एक सीएसएस वर्ग से बांधता है
  • [style.stylePropertyName] एक शैली संपत्ति के लिए बांधता है
  • [style.stylePropertyName.px] एक प्रीसेट यूनिट के साथ एक स्टाइल प्रॉपर्टी से बांधता है
  • [attr.attrName] एक विशेषता के लिए एक मूल्य बांधता है (DOM में दिखाई देता है, जबकि गुण दिखाई नहीं देते हैं)
  • [role.roleName] ARIA भूमिका विशेषता के लिए बाध्य (अभी तक उपलब्ध नहीं)

• prop="{{value}}"एक संपत्ति के लिए एक मूल्य बांधता है। मान कड़ा है (उर्फ प्रक्षेप)

• (event)="expr"एक ईवेंट हैंडलर को एक @Output()या DOM ईवेंट में बांधता है

• #varया #varसंदर्भ के आधार पर अलग-अलग कार्य हैं

  • एक *ngFor="#x in y;#i=index"दायरे में पुनरावृत्ति के लिए चर बनाए जाते हैं
    (बीटा.17 में इसे बदलकर * ngFor = "let x in y; let i = index" `) कर दिया जाता है।
  • DOM तत्व के <div #mydiv>संदर्भ में तत्व पर
  • एक कोणीय घटक पर घटक का संदर्भ
  • एक तत्व पर, जो एक कोणीय घटक है या एक कोणीय निर्देश है जहां exportAs:"ngForm"परिभाषित किया गया है, #myVar="ngForm"इस घटक या निर्देश का संदर्भ बनाता है।

Comments

या bind-के लिए []और on-के लिए ()या <template [ngFor]>के लिए *ngFor।

— गुंटर जोचबॉउर

[(NgModel)] चौकोर कोष्ठक के भीतर कोष्ठक का क्या मतलब है?

— उस्मान

दो-तरफा (यह भी एक box6 में "केला कहा जाता है) बंधन। यह की (या का संक्षिप्त रूप) संयोजन है [ngModel]="foo" (ngModelChange)="foo = $event"जहां पहले भाग को अद्यतन करता ngModelसंपत्ति ( @Input() ngModel;के NgModelनिर्देश ) when foo` परिवर्तन और 2 हिस्सा अद्यतन fooजब @Output() ngModelChange;(के NgModelनिर्देश) एक घटना का उत्सर्जन करता है। NgModelतत्वों और घटकों को बनाने के लिए मूल्यों को बांधने के लिए उपयोग किया जाता है । इसका उपयोग [(bar)]किसी भी @Input() bar; @Output() barChange;संयोजन के लिए किया जा सकता है , अपने स्वयं के घटकों के लिए भी ।

— गुंटर ज़ोचबॉयर

@ GünterZöchbauer सिंटैक्स के अलावा [prop]="value"और क्या अंतर है prop="{{value}}"? दोनों @Input() value;घटक में मूल्य पारित कर सकते हैं ।

— दीपिक्स

@DiPix [prop]="value"किसी भी प्रकार के मूल्यों को असाइन कर सकता है, prop="{{value}}"हमेशा valueअसाइनमेंट से पहले स्ट्रिंग करता है और इसलिए ऑब्जेक्ट्स को पास करना बेकार है।

— गुंटर ज़ोचबॉयर

Answer 2

[]- लक्ष्य को देखने के लिए डेटा स्रोत से वन- बाइंडिंग संपत्ति । जैसे

{{expression}}
[target]="expression"
bind-target="expression"

हम इसके बजाय बाँध का उपयोग कर सकते हैं []

()-> इवेंट बाइंडिंग व्यू-टारगेट से डेटा स्रोत तक

(target)="statement"
on-target="statement"

हम (के बजाय) का उपयोग कर सकते हैं

[()]- एक बॉक्स में केले को बांधने का दो तरीका

[(target)]="expression"
bindon-target="expression"

हम इसके बजाय- bindon- का उपयोग कर सकते हैं [()]

Answer 3

जैसा कि पहले ही उल्लेख किया गया है, कोणीय दस्तावेज़ीकरण, विशेष रूप से "हीरो ट्यूटोरियल", इसे और गहरा बताते हैं। यहाँ लिंक है यदि आप इसे देखना चाहते हैं ।

कोष्ठक उस तत्व की घटना है जिस पर आप काम कर रहे हैं, जैसे बटन पर क्लिक करें जैसे आपका उदाहरण; यह उस तत्व के लिए मूसडाउन, कीप, ऑनसेले या कोई क्रिया / घटना भी हो सकती है, और =कॉल करने की विधि का नाम क्या है - कॉल के लिए कोष्ठक का उपयोग करना। उस विधि को आपके घटक वर्ग पर परिभाषित किया जाना चाहिए, अर्थात:

<element (event)="method()"></element>

ब्रैकेट दूसरे तरीके से काम करता है। उन्हें आपकी कक्षा से डेटा प्राप्त करना है - घटना को भेजने वाले कोष्ठक के विपरीत - तो एक सामान्य उदाहरण इस तरह की शैली का उपयोग है:

<element [ngStyle]="{display:someClassVariable}">

देख? आप तत्व को अपने मॉडल / वर्ग के आधार पर एक शैली दे रहे हैं।

इसके लिए आप उपयोग कर सकते हैं ...

<element style="display:{{ModelVariable}};">

पुनर्संयोजन यह है कि आप डबल कर्ली ब्रैकेट का उपयोग उन चीजों के लिए करते हैं जिन्हें आप स्क्रीन पर प्रिंट करेंगे:

<h1>{{Title}}</h1>

आप जो भी उपयोग करते हैं, यदि आप सुसंगत हैं, तो यह आपके कोड की पठनीयता में मदद करेगा।

अंत में, आपके *प्रश्न के लिए, यह एक लंबा स्पष्टीकरण है, लेकिन यह बहुत महत्वपूर्ण है: यह कुछ तरीकों के कार्यान्वयन को अमूर्त करता है अन्यथा आपको ngForकाम करने के लिए करना होगा।

एक महत्वपूर्ण अद्यतन यह है कि ngForअब आप हैश का उपयोग नहीं करेंगे; आपको letनिम्नानुसार उपयोग करने की आवश्यकता है:

<tr *ngFor="let movie of movies">
    <td>{{movie.title}}</td>
</tr>

एक अंतिम बात ध्यान देने योग्य है कि उपरोक्त सभी आपके घटकों के लिए भी लागू होते हैं, उदाहरण के लिए यदि आप अपने घटक में एक विधि बनाते हैं, तो इसका उपयोग करना कहा जाएगा ():

<my-owncomponent 
    (onSearched)="MethodToCall()" 
    [MyInputData]="SearchParamsArray"></my-owncomponent>