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

155

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

Steven Liekens
fuente
44
@NiekT. esto es diferente, let- * en angular 2 es el alcance de la variable de plantilla
Sterling Archer
3
angular.io/docs/ts/latest/guide/… busca la palabra "let" (con un espacio) y ve alrededor de la novena. Hay una buena explicación de lo que hace esta variable de plantilla
Sterling Archer el
@SterlingArcher Gracias por la corrección, soy bastante nuevo en JS y Angular.
Nodon Darkeye

Respuestas:

152

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

Günter Zöchbauer
fuente
2
Gracias por la explicación ngOutletContext. Ese era el eslabón perdido entre lo que ya sabía y la información que no pude encontrar en la documentación.
Steven Liekens
1
No creo que se llame ngTemplateOutletContextcomo usted sugirió en el lanzamiento de angular 5. Los documentos tampoco mencionan nada sobre su desaprobación. angular.io/api/common/NgTemplateOutlet
Jessy
5 aún no se ha lanzado. No estoy seguro de lo que muestran los documentos. El registro de cambios no tiene nada nuevo desde entonces.
Günter Zöchbauer
1
Gracias por esta respuesta, hay una gran falta de documentación sobre lo que *está haciendo la sintaxis.
Dook
No debería ser la segunda plantilla ng (la que tiene ngTemplateOutlet) realmente ng-template. Tal vez ng-container sería mejor? Supongo que ambos funcionarán, pero el contenedor ng es semánticamente más correcto. ¿O estoy equivocado?
Ondrej Peterka
0

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.

dontry
fuente