Qu'est-ce que let - * en Angular 2 templates?
j'ai trouvé une étrange syntaxe d'assignation à l'intérieur d'un modèle angulaire 2.
<template let-col let-car="rowData" pTemplate="body">
<span [style.color]="car[col.field]">{{car[col.field]}}</span>
</template>
il apparaît que let-col et let-car="rowData" créent deux nouvelles variables col et car qui peuvent alors être liées à l'intérieur du modèle.
Source: https://www.primefaces.org/primeng/#/datatable/templating
Quelle est cette syntaxe magique let-* appelée?
comment ça marche?
Quelle est la différence entre let-something et let-something="something else" ?
le code ci-dessus peut-il être réécrit en utilisant <ng-container> au lieu de <template> sans changer la structure finale du DOM?
1 réponses
mise à jour Angulaire 5
ngOutletContext a été renommé en ngTemplateOutletContext
Voir aussi https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
original
Templates ( <template> , ou <ng-template> depuis 4.x) sont ajoutés en tant que vues intégrées et passent un contexte.
Avec let-col le contexte de la propriété $implicit est disponible sous la forme col dans le modèle pour les liaisons.
Avec let-foo="bar" la propriété de contexte bar est disponible comme foo .
par exemple si vous ajoutez un modèle
<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>
Voir aussi cette réponse et ViewContainerRef#createembeddeview .
*ngFor fonctionne aussi de cette manière. La syntaxe canonique rend cela plus évident
<ng-template let-item [ngForOf]="items" let-i="index" let-odd="odd">
<div>{{item}}
</ng-template>
où NgFor ajoute le gabarit comme vue intégrée au DOM pour chaque item de items et ajoute quelques valeurs ( item , index , odd ) au contexte.
Voir aussi à l'Aide de $implict passer plusieurs paramètres,