Apa itu let- * dalam template Angular 2?

Saya menemukan sintaks tugas yang aneh di dalam template Angular 2.

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

Tampaknya let-coldan let-car="rowData"membuat dua variabel baru coldan caryang kemudian dapat diikat ke dalam template.

Sumber: https://www.primefaces.org/primeng/#/datatable/templating

let-*Disebut apakah sintaksis magis ini ?

Bagaimana cara kerjanya?

Apa perbedaan antara let-somethingdan let-something="something else"?

perbarui Angular 5

ngOutletContext diubah namanya menjadi ngTemplateOutletContext

Lihat juga https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

asli

Templat (<template> , atau <ng-template>sejak 4.x) ditambahkan sebagai tampilan tersemat dan diteruskan konteks.

Dengan let-colkonteks properti $implicitdibuat tersedia coldalam template untuk binding. Dengan let-foo="bar"properti konteksbar dibuat tersedia sebagai foo.

Misalnya jika Anda menambahkan templat

<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>

Lihat juga jawaban ini dan ViewContainerRef # createEmbeddedView .

*ngForjuga bekerja dengan cara ini. Sintaksis kanonik membuat ini lebih jelas

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

di mana NgFormenambahkan template sebagai tertanam pandangan ke DOM untuk setiap itemdari itemsdan menambahkan beberapa nilai ( item, index, odd) dengan konteks.

Lihat juga Menggunakan $ Implt untuk melewati beberapa parameter

Microsyntax Angular memungkinkan Anda mengonfigurasi arahan dalam string yang ringkas dan ramah. Parser microsyntax menerjemahkan string itu ke dalam atribut pada <ng-template>. Biarkan kata kunci menyatakan variabel input templat yang Anda referensi di dalam templat.