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

我在一个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 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传递多个参数

2017-03-23 14:07:27

其他回答

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

2020-01-09 02:10:07