Что такое let - * в угловых шаблонах 2?
я наткнулся на странный синтаксис назначения внутри шаблона Angular 2.
<template let-col let-car="rowData" pTemplate="body">
<span [style.color]="car[col.field]">{{car[col.field]}}</span>
</template>
получается, что let-col
и let-car="rowData"
создать две новые переменные col
и car
который затем может быть привязан к внутри шаблона.
Источник:https://www.primefaces.org/primeng/#/datatable/templating
что это за волшебные let-*
синтаксис называется?
как это работает?
в чем разница между let-something
и let-something="something else"
?
можно ли переписать приведенный выше код с помощью <ng-container>
вместо <template>
без изменения окончательной структуры DOM?
1 ответ:
обновить угловой 5
ngOutletContext
была переименована вngTemplateOutletContext
Смотрите также https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
оригинал
Шаблоны (
<template>
или<ng-template>
С 4.x) добавляются как встроенные представления и передаются контексту.С
let-col
контекст собственность$implicit
какcol
в шаблон для привязки. Сlet-foo="bar"
свойство контекстаbar
какfoo
.например, если вы добавляете шаблон
<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>
см. также ответ и ViewContainerRef#createEmbeddedView.
*ngFor
также работает таким образом. Канонический синтаксис делает это более очевидным<ng-template let-item [ngForOf]="items" let-i="index" let-odd="odd"> <div>{{item}} </ng-template>
здесь
NgFor
добавляет шаблон в виде встроенного представления в DOM для каждогоitem
наitems
и добавляет несколько значений (item
,index
,odd
) в контексте.см. также использование $implict для передачи нескольких параметров
Comments