Angular 2 模板中的 let-* 是什么？

Question

我在 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"有什么区别？

Answer 1

更新Angular5

ngOutletContext 已重命名为 ngTemplateOutletContext

另见 CHANGELOG.md @ angular/angular

原创

模板（<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>

另见 this answer and ViewContainerRef#createEmbeddedView。

*ngFor 也可以这样工作。规范语法使这一点更加明显

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

其中 NgFor 将模板作为嵌入视图添加到 items 的每个 item 的 DOM 中，并添加一些值（item， index, odd) 到上下文。

另见

Answer 2

Angular 微语法允许您在紧凑、友好的字符串中配置指令。微语法解析器将该字符串转换为 <ng-template> 上的属性。 let 关键字声明您在模板中引用的模板输入变量。

Angular 2 模板中的 let-* 是什么？

What is let-* in Angular 2 templates?

angular2-template

primeng

angular