Angular 2
टेम्पलेट्स
खोज…
परिचय
टेम्प्लेट्स, Angular 1 के टेम्प्लेट से बहुत मिलते-जुलते हैं, हालांकि इसमें कई छोटे-छोटे सिंटैक्टिकल बदलाव होते हैं जो यह स्पष्ट करते हैं कि क्या हो रहा है।
कोणीय 2 टेम्प्लेट
एक सरल नमूना
आइए एक बहुत ही सरल टेम्पलेट से शुरू करें जो हमारा नाम और हमारी पसंदीदा चीज़ दिखाता है:
<div>
Hello my name is {{name}} and I like {{thing}} quite a lot.
</div>
{}: रेंडरिंग
मान प्रदान करने के लिए, हम मानक डबल-कर्ली सिंटैक्स का उपयोग कर सकते हैं:
My name is {{name}}
पाइप्स, जिसे पहले "फ़िल्टर्स" के रूप में जाना जाता था, एक मूल्य को एक नए मूल्य में परिवर्तित करता है, जैसे एक स्ट्रिंग को स्थानीय बनाना या एक फ्लोटिंग पॉइंट मान को मुद्रा प्रतिनिधित्व में परिवर्तित करना:
[]: बाइंडिंग गुण
किसी चर को किसी घटक में हल करने और बाँधने के लिए, [] वाक्यविन्यास का उपयोग करें। यदि हमारे पास हमारे घटक में यह है। हम अपने घटक के माध्यम से इसे पास करेंगे और मान सिंक में रहेंगे।
<video-control [volume]="currentVolume"></video-control>
(): HANDLING EVENTS
(): हैंडलिंग के घटक एक घटना के लिए सुनने के लिए, हम () वाक्यविन्यास का उपयोग करते हैं
<my-component (click)="onClick($event)"></my-component>
[()]: दो-दिन डेटा बाइंडिंग
उपयोगकर्ता इनपुट और अन्य घटनाओं के लिए एक बाइंडिंग रखने के लिए, [()] सिंटैक्स का उपयोग करें। इसे एक घटना को संभालने और एक संपत्ति को बांधने के संयोजन के रूप में सोचें:
<input [(ngModel)] = "myName"> यह आपके घटक का मान मान इनपुट मूल्य के साथ सिंक में रहेगा।
* : ASTERISK
इंगित करता है कि यह निर्देश इस घटक को एक टेम्पलेट के रूप में मानता है और इसे इस तरह नहीं खींचेगा। उदाहरण के लिए, ngFor हमारे आइटम को प्रत्येक आइटम के लिए बाहर ले जाता है और मुहर लगाता है, लेकिन यह हमारे शुरुआती को कभी प्रस्तुत नहीं करता है क्योंकि यह एक टेम्प्लेट है:
<my-component *ngFor="#item of items">
</my-component>
अन्य समान निर्देश जो रेंडर किए गए घटकों के बजाय टेम्प्लेट पर काम करते हैं वे हैं * ngIf और * ngSwitch।