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

Question

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

Me encontré con una extraña sintaxis de asignación 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-col y let-car="rowData" crear dos nuevas variables col y car que puede ser enlazado dentro de la plantilla.

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

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

¿Cómo funciona?

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

Puede el código anterior ¿reescribirse usando <ng-container> en lugar de <template> sin cambiar la estructura final del DOM?

62

angular angular2-template primeng

Author: Sunil Garg, 2017-03-23

Source

1 answers

score 65 · Accepted Answer

Actualización Angular 5

ngOutletContext fue renombrado a ngTemplateOutletContext

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

Original

Plantillas (<template>, o <ng-template> desde 4.x) se añaden como vistas incrustadas y se pasa un contexto.

Con let-col la propiedad context $implicit está disponible como col dentro de la plantilla para enlaces. Con let-foo="bar" se crea la propiedad de contexto bar 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>

Ver también esta respuesta y ViewContainerRef#createEmbeddedView.

*ngFor también funciona de esta manera. La sintaxis canónica hace esto más obvio

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

Donde NgFor agrega la plantilla como vista incrustada al DOM para cada item de items y agrega algunos valores (item, index, odd) al contexto.

Véase también Usando $implict para pasar múltiples parámetros