Qu'est-ce que let- * in Angular 2 templates?

Question

Je suis tombé sur un étrange syntaxe d'affectation à l'intérieur Angulaire à 2 modèle.

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

Il semble que l' let-col et let-car="rowData" créer deux nouvelles variables col et car qui peut ensuite être lié à l'intérieur du modèle.

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

Qu'est-ce que cette magie let-* de la syntaxe appelé?

Comment ça fonctionne?

Quelle est la différence entre let-something et let-something="something else"?

Peuvent le code ci-dessus être réécrite en utilisant <ng-container> au lieu de <template> sans changer la finale DOM structure?

Answer 1

mise à jour Angulaire 5

ngOutletContext a été renommé ngTemplateOutletContext

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

d'origine

Les modèles (<template>ou <ng-template> depuis le 4.x) sont ajoutés en tant que embedded points de vue et avoir réussi un contexte.

Avec let-col de la propriété context $implicit est disponible en col dans le modèle pour les liaisons. Avec let-foo="bar" de la propriété context bar est disponible en foo.

Par exemple, si vous ajoutez un modèle de

<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#createEmbeddedView.

*ngFor fonctionne aussi de cette manière. La syntaxe canonique fait ce plus évident

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

où NgFor ajoute le modèle intégré, vue vers les DOM pour chaque item de items et ajoute un peu de valeurs (item, index, odd) du contexte.

Voir aussi l'Utilisation de $implict pour passer plusieurs paramètres