¿Qué es let- * en las plantillas de Angular 2?

Encontré una sintaxis de asignación extraña dentro de una plantilla Angular 2.

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

Parece que let-coly let-car="rowData"crea dos nuevas variables coly carque luego se pueden vincular dentro de la plantilla.

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

¿Cómo se llama esta let-*sintaxis mágica ?

¿Como funciona?

¿Cuál es la diferencia entre let-somethingy let-something="something else"?

actualizar Angular 5

ngOutletContext fue renombrado a ngTemplateOutletContext

Ver también https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

original

Las plantillas ( <template>o <ng-template>desde 4.x) se agregan como vistas incrustadas y se les pasa un contexto.

Con let-colla propiedad de contexto $implicitestá disponible como coldentro de la plantilla para enlaces. Con let-foo="bar"el contexto, la propiedad barestá disponible como foo.

Por ejemplo, si agrega una plantilla

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

Vea también esta respuesta y ViewContainerRef # createEmbeddedView .

*ngForTambién funciona de esta manera. La sintaxis canónica lo hace más obvio.

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

donde NgForagrega la plantilla como vista incrustada al DOM para cada uno itemde los itemsy agrega unos pocos valores ( item, index, odd) para el contexto.

Consulte también Uso de $ implict para pasar múltiples parámetros

La microsintaxis angular le permite configurar una directiva en una cadena compacta y amigable. El analizador de microsintaxis traduce esa cadena en atributos en <ng-template>. La palabra clave let declara una variable de entrada de plantilla a la que hace referencia dentro de la plantilla.