Что такое let- * in Angular 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"?

Ответ 1

обновить Angular 5

ngOutletContext был переименован в ngTemplateOutletContext

Оригинальный

Шаблоны (<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 ngFor let-item [ngForOf]="items" let-i="index" let-odd="odd">
  <div>{{item}}</div>
</ng-template>

где NgFor добавляет шаблон в качестве встроенного представления в DOM для каждого item из items и добавляет несколько значений (item, index, odd) в контекст.

См. также Использование $ implict для передачи нескольких параметров.