我在一个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/ /数据表/模板
这个神奇的let-*语法叫什么?
它是如何工作的?
let-something和let-something="something else"的区别是什么?
当前回答
Angular的微语法允许你用简洁友好的字符串来配置指令。微语法解析器将该字符串转换为<ng-template>上的属性。let关键字声明了模板中引用的模板输入变量。
其他回答
更新Angular 5
ngOutletContext重命名为ngTemplateOutletContext
参见CHANGELOG。Md @有角的/有角的
原始
模板(<template>，或自4.x起<ng-template>)作为嵌入式视图添加，并传递一个上下文。
使用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, index, odd)添加到上下文中。
参见使用$ implicit传递多个参数
Angular的微语法允许你用简洁友好的字符串来配置指令。微语法解析器将该字符串转换为<ng-template>上的属性。let关键字声明了模板中引用的模板输入变量。
