อะไรคือ - ในเทมเพลต Angular 2

ฉันเจอไวยากรณ์ที่ได้รับมอบหมายแปลก ๆ ภายในเทมเพลต Angular 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"คืออะไร?

อัปเดตเชิงมุม 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"คุณสมบัติบริบทจะทำให้ใช้ได้ในฐานะbarfoo

ตัวอย่างเช่นถ้าคุณเพิ่มแม่แบบ

<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เพิ่มแม่แบบเป็นมุมมองที่ฝังตัวเพื่อ DOM สำหรับแต่ละitemของitemsและเพิ่มค่าไม่กี่ ( item, index, odd) บริบท

ดูเพิ่มเติมที่การใช้ $ implict เพื่อส่งผ่านพารามิเตอร์หลายตัว

ไมโครซิงก์ Angular ช่วยให้คุณกำหนดค่าคำสั่งในสตริงขนาดกะทัดรัดและเป็นมิตร ตัวแยกวิเคราะห์ microsyntax <ng-template>แปลสตริงที่เป็นคุณลักษณะบน คำหลักให้ประกาศตัวแปรตัวแปรแม่แบบที่คุณอ้างอิงภายในแม่แบบ