web-dev-qa-db-fra.com

Qu'est-ce qui est laissé * dans Angular 2 modèles?

Je suis tombé sur une étrange syntaxe d’affectation dans un modèle Angular 2.

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

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

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

Comment appelle-t-on cette syntaxe magique let-*?

Comment ça marche?

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

angularangular2-templateprimeng
105
Steven Liekens

update Angular 5

ngOutletContexta été renommé en ngTemplateOutletContext

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

original

Les modèles (<template> ou <ng-template> depuis 4.x) sont ajoutés en tant que vues intégrées et reçoivent un contexte.

Avec let-col, la propriété de contexte $implicit est rendue disponible en tant que col dans le modèle de liaisons. Avec let-foo="bar", la propriété de contexte bar est rendue disponible sous la forme 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 # createEmbeddedView .

*ngFor fonctionne également de cette façon. 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 modèle sous forme de vue intégrée au DOM pour chaque item de items et ajoute quelques valeurs (item, index, odd) au contexte.

Voir aussi tilisation de $ implict pour passer plusieurs paramètres

102
Günter Zöchbauer