Qu'est-ce que let- * dans les modèles Angular 2?

156

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 apparaît que let-colet let-car="rowData"créer deux nouvelles variables colet carqui peuvent ensuite être liées à l'intérieur du modèle.

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

Comment s'appelle cette let-*syntaxe magique ?

Comment ça marche?

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

angular angular2-template primeng

— Steven Liekens
source

@NiekT. c'est différent, let- * dans angulaire 2 est la portée de la variable du modèle

— Sterling Archer

angular.io/docs/ts/latest/guide/... recherchez le mot "let" (avec un espace) et allez vers le 9e. Il y a une bonne explication de ce que fait cette variable de modèle

— Sterling Archer

@SterlingArcher Merci pour la correction, je suis assez nouveau dans JS et Angular moi-même.

— Nodon Darkeye

Réponses:

154

mettre à jour Angular 5

ngOutletContext a é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-colla propriété context $implicitest rendue disponible comme coldans le modèle pour les liaisons. Avec let-foo="bar"le contexte, la propriété barest 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 également cette réponse et ViewContainerRef # createEmbeddedView .

*ngForfonctionne également de cette façon. La syntaxe canonique rend cela plus évident

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

où NgForajoute le modèle comme vue intégrée au DOM pour chacun itemde itemset ajoute quelques valeurs ( item, index, odd) au contexte.

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

— Günter Zöchbauer
source

Merci d'avoir expliqué ngOutletContext. C'était le chaînon manquant entre ce que je savais déjà et les informations que je ne trouvais pas dans la documentation.

— Steven Liekens

Je ne pense pas que ce soit appelé ngTemplateOutletContextcomme vous l'avez suggéré dans la version d'angular 5. La documentation ne mentionne pas non plus qu'il soit obsolète. angular.io/api/common/NgTemplateOutlet

— Jessy

5 n'est pas encore publié. Je ne sais pas ce que montrent les documents. Le changelog n'a rien de nouveau depuis lors.

— Günter Zöchbauer

Merci pour cette réponse, il y a un fort manque de documentation sur ce que fait la *syntaxe.

— dook

Ne devrait pas être le deuxième ng-template (celui avec ngTemplateOutlet) vraiment ng-template. Peut-être que ng-container serait mieux? Les deux fonctionneront je suppose, mais le ng-container est sémantiquement plus correct. Ou ai-je tort?

— Ondrej Peterka

La microsyntaxe angulaire vous permet de configurer une directive dans une chaîne compacte et conviviale. L'analyseur de microsyntaxe traduit cette chaîne en attributs sur le <ng-template>. Le mot clé let déclare une variable d'entrée de modèle que vous référencez dans le modèle.

— ne pas faire
source