Co to jest let- * w szablonach Angular 2?

155

W szablonie Angular 2 natknąłem się na dziwną składnię przypisania.

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

Wydaje się, że let-coli let-car="rowData"utworzyć dwie nowe zmienne coli carktóre mogą być następnie wiąże się wewnątrz szablonu.

Źródło: https://www.primefaces.org/primeng/#/datatable/templating

Jak nazywa się ta magiczna let-*składnia?

Jak to działa?

Jaka jest różnica między let-somethingi let-something="something else"?

angular angular2-template primeng Steven Liekens
źródło

@NiekT. jest inaczej, niech- * w kątowym 2 to zakres zmiennej szablonu

Sterling Archer

angular.io/docs/ts/latest/guide/ ... wyszukaj słowo „let” (ze spacją) i przejdź do około dziewiątego. Jest dobre wyjaśnienie tego, co robi ta zmienna szablonu

Sterling Archer

@SterlingArcher Dzięki za korektę, ja jestem całkiem nowy w JS i Angular.

Nodon Darkeye

Odpowiedzi:

152

zaktualizuj Angular 5

ngOutletContext została zmieniona na ngTemplateOutletContext

Zobacz też https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

oryginalny

Szablony ( <template>lub <ng-template>od 4.x) są dodawane jako widoki osadzone i są przekazywane do kontekstu.

Z let-colwłaściwością context $implicitjest udostępniana jak colw szablonie dla powiązań. Wraz let-foo="bar"z właściwością context barjest udostępniana jako foo.

Na przykład, jeśli dodasz szablon

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

Zobacz także tę odpowiedź i ViewContainerRef # createEmbeddedView .

*ngFordziała również w ten sposób. Składnia kanoniczna czyni to bardziej oczywistym

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

gdzie NgFordodaje szablon jako osadzony celu DOM dla każdego itemz itemsi dodaje kilka wartości ( item, index, odd) do kontekstu.

Zobacz także Używanie $ implict do przekazywania wielu parametrów

Günter Zöchbauer
źródło

Dzięki za wyjaśnienie ngOutletContext. To był brakujący związek między tym, co już wiedziałem, a informacjami, których nie mogłem znaleźć w dokumentacji.

Steven Liekens

Nie sądzę, że jest to nazwane ngTemplateOutletContexttak, jak zasugerowałeś w wydaniu Angular 5. Dokumentacja również nie wspomina nic o tym, że jest przestarzała. angular.io/api/common/NgTemplateOutlet

Jessy

5 nie jest jeszcze wydany. Nie jestem pewien, co pokazują dokumenty. Od tamtej pory dziennik zmian nie ma w tym nic nowego.

Günter Zöchbauer

Dziękuję za tę odpowiedź, brakuje dokumentacji na temat tego, co *robi składnia.

dook

Nie powinien to być drugi szablon ng-template (ten z ngTemplateOutlet) naprawdę ng-template. Może ng-container byłby lepszy? Myślę, że oba będą działać, ale pojemnik ng jest semantycznie bardziej poprawny. A może się mylę?

Ondrej Peterka

Angular microsyntax umożliwia skonfigurowanie dyrektywy w zwartym, przyjaznym ciągu. Parser mikrosyntax tłumaczy ten ciąg na atrybuty w <ng-template>. Słowo kluczowe let deklaruje zmienną wejściową szablonu, do której odwołujesz się w szablonie.

dontry
źródło