क्या है - * कोणीय 2 टेम्प्लेट में?

Question

मुझे एक कोणीय 2 टेम्पलेट के अंदर एक अजीब असाइनमेंट सिंटैक्स आया।

<template let-col let-car="rowData" pTemplate="body">
    <span [style.color]="car[col.field]">{{car[col.field]}}</span>
</template>

ऐसा लगता है कि let-colऔर let-car="rowData"दो नए चर बनाने colऔर carहै कि तब टेम्पलेट के अंदर करने के लिए बाध्य किया जा सकता है।

स्रोत: https://www.primefaces.org/primeng/#/datatable/templating

इस जादुई let-*वाक्य रचना को क्या कहा जाता है?

यह कैसे काम करता है?

बीच क्या अंतर है let-somethingऔर let-something="something else"?

Comments

@NiekT। यह अलग है, कोणीय 2 में लेटर * टेम्प्लेट वैरिएबल स्कोपिंग है

— स्टर्लिंग आर्चर

angular.io/docs/ts/latest/guide/… शब्द "चलो" (एक स्थान के साथ) खोजें और 9 वें के आसपास जाएं। इस टेम्पलेट चर क्या करता है की एक अच्छी व्याख्या है

— स्टर्लिंग आर्चर

@SterlingArcher सुधार के लिए धन्यवाद, मैं खुद JS और Angular के लिए काफी नया हूं।

— Nodon Darkeye

Answer 1

अद्यतन कोणीय 5

ngOutletContext का नाम बदल दिया गया ngTemplateOutletContext

Https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29 भी देखें

मूल

टेम्पलेट्स ( <template>या <ng-template>4.x के बाद से) एम्बेडेड विचारों के रूप में जोड़े जाते हैं और एक संदर्भ प्राप्त करते हैं।

let-colसंदर्भ के साथ संपत्ति $implicitको colबाइंडिंग के लिए टेम्पलेट के भीतर उपलब्ध कराया जाता है। let-foo="bar"संदर्भ के साथ संपत्ति के barरूप में उपलब्ध कराया जाता है foo।

उदाहरण के लिए यदि आप एक टेम्पलेट जोड़ते हैं

<ng-template #myTemplate let-col let-foo="bar">
  <div>{{col}}</div>
  <div>{{foo}}</div>
</ng-template>

<!-- render above template with a custom context -->
<ng-template [ngTemplateOutlet]="myTemplate"
             [ngTemplateOutletContext]="{
                                           $implicit: 'some col value',
                                           bar: 'some bar value'
                                        }"
></ng-template>

यह भी देखें इस सवाल का जवाब और ViewContainerRef # createEmbeddedView ।

*ngForइस तरह से भी काम करता है। विहित वाक्यविन्यास इसे और अधिक स्पष्ट करता है

<ng-template ngFor let-item [ngForOf]="items" let-i="index" let-odd="odd">
  <div>{{item}}</div>
</ng-template>

जहां NgForप्रत्येक के लिए डोम को एम्बेडेड दृश्य के रूप में टेम्पलेट कहते हैं itemकी itemsऔर कुछ मूल्यों (कहते हैं item, index, oddसंदर्भ के लिए)।

कई मापदंडों को पारित करने के लिए $ निहितार्थ का उपयोग करना भी देखें

Comments

समझाने के लिए धन्यवाद ngOutletContext। वह वही था जो मैं पहले से जानता था और जो जानकारी मुझे प्रलेखन में नहीं मिली, उसके बीच की गायब कड़ी थी।

— स्टीवन लिकेन्स

मुझे नहीं लगता कि यह कहा जाता है ngTemplateOutletContextजैसा कि आपने कोणीय 5. के विमोचन में सुझाया है। डॉक्स ने इस बारे में कुछ भी उल्लेख नहीं किया है कि यह पदावनत किया जा रहा है। angular.io/api/common/NgTemplateOutlet

— जेसी

5 अभी जारी नहीं हुआ है। सुनिश्चित नहीं है कि डॉक्स क्या दर्शाता है। चैंज के बाद से इसके बारे में कुछ नया नहीं है।

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

इस उत्तर के लिए धन्यवाद, *वाक्यविन्यास क्या कर रहा है , इस पर प्रलेखन की भारी कमी है।

— Dook

दूसरा एनजी टेम्प्लेट नहीं होना चाहिए (ngTemplateOutlet वाला) वास्तव में एनजी-टेम्प्लेट। शायद एनजी-कंटेनर बेहतर होगा? दोनों काम करेंगे मुझे लगता है, लेकिन एनजी-कंटेनर शब्दार्थ अधिक सही है। या मैं गलत हूँ?

— ओन्ड्रेज पीटरका

Answer 2

कोणीय microsyntax आपको एक निर्देश को एक कॉम्पैक्ट, मैत्रीपूर्ण स्ट्रिंग में कॉन्फ़िगर करने देता है। Microsyntax parser उस स्ट्रिंग को विशेषताओं पर अनुवादित करता है <ng-template>। लेटर कीवर्ड एक टेम्प्लेट इनपुट वैरिएबल घोषित करता है जिसे आप टेम्प्लेट के भीतर रेफर करते हैं।