Was ist let- * in Angular 2-Vorlagen?

153

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

angular angular2-template primeng

— Steven Liekens
quelle

@NiekT. Dies ist anders, let- * in Winkel 2 ist Template Variable Scoping

— Sterling Archer

angular.io/docs/ts/latest/guide/… suche das Wort "let" (mit einem Leerzeichen) und gehe um das 9. herum. Es gibt eine gute Erklärung, was diese Vorlagenvariable tut

— Sterling Archer

@SterlingArcher Danke für die Korrektur, ich bin ziemlich neu bei JS und Angular.

— Nodon Darkeye

Antworten:

152

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

— Günter Zöchbauer
quelle

Danke für die Erklärung ngOutletContext. Das war das fehlende Bindeglied zwischen dem, was ich bereits wusste, und den Informationen, die ich in der Dokumentation nicht finden konnte.

— Steven Liekens

Ich glaube nicht, dass es so heißt, ngTemplateOutletContextwie Sie es in der Version von Angular 5 vorgeschlagen haben. In den Dokumenten wird auch nichts darüber erwähnt, dass es veraltet ist. angle.io/api/common/NgTemplateOutlet

— Jessy

5 ist noch nicht freigegeben. Nicht sicher, was die Dokumente zeigen. Das Changelog hat seitdem nichts Neues mehr.

— Günter Zöchbauer

Vielen Dank für diese Antwort. Es gibt einen starken Mangel an Dokumentation darüber, was die *Syntax tut.

— Dook

Sollte nicht die zweite ng-Vorlage sein (die mit ngTemplateOutlet), die wirklich ng-Vorlage ist. Vielleicht wäre ng-container besser? Beides wird funktionieren, denke ich, aber der ng-Container ist semantisch korrekter. Oder liege ich falsch?

— Ondrej Peterka

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.

— dontry
quelle