Was ist let- * in Angular 2-Vorlagen?

Ich bin auf eine seltsame Zuweisungssyntax in einer Angular 2-Vorlage gestoßen.

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

Es scheint, dass let-colund let-car="rowData"erstellen Sie zwei neue Variablen colund cardas kann dann innerhalb der Vorlage gebunden werden.

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

Wie heißt diese magische let-*Syntax?

Wie funktioniert es?

Was ist der Unterschied zwischen let-somethingund let-something="something else"?

Aktualisieren Sie Angular 5

ngOutletContext wurde umbenannt in ngTemplateOutletContext

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

Original

Vorlagen ( <template>oder <ng-template>seit 4.x) werden als eingebettete Ansichten hinzugefügt und erhalten einen Kontext.

Mit let-coldem Kontext wird die Eigenschaft $implicitwie colin der Vorlage für Bindungen zur Verfügung gestellt. Mit let-foo="bar"dem Kontext wird die Eigenschaft barals verfügbar gemacht foo.

Zum Beispiel, wenn Sie eine Vorlage hinzufügen

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

Siehe auch diese Antwort und ViewContainerRef # createEmbeddedView .

*ngForfunktioniert auch so. Die kanonische Syntax macht dies deutlicher

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

wo NgForfügt die Vorlage als eingebettete Ansicht auf das DOM für jeden itemvon itemsund fügt ein paar Werte ( item, index, odd) auf den Kontext.

Siehe auch Verwenden von $ implict zum Übergeben mehrerer Parameter

Mit der Angular-Mikrosyntax können Sie eine Direktive in einer kompakten, benutzerfreundlichen Zeichenfolge konfigurieren. Der Mikrosyntax-Parser übersetzt diese Zeichenfolge in Attribute auf der <ng-template>. Das Schlüsselwort let deklariert eine Vorlageneingabevariable, auf die Sie in der Vorlage verweisen.