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
la 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
la 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
la source