Що таке шаблони у шаблонах 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"?

оновлення Angular 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 ngFor let-item [ngForOf]="items" let-i="index" let-odd="odd">
  <div>{{item}}</div>
</ng-template>

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

Див. Також Використання $ implict для передачі декількох параметрів

Кутовий мікросинтаксис дозволяє налаштувати директиву в компактній дружній рядку. Мікросинтаксичний аналізатор переводить цей рядок в атрибути на <ng-template>. Ключове слово let оголошує змінну введення шаблону, на яку ви посилаєтесь у шаблоні.