什么是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"？

可以使用let-col而不是在let-car="rowData"不更改最终DOM结构的情况下重写上述代码吗？

Answer 1

更新Angular 5

ngOutletContext 被重命名为 ngTemplateOutletContext

另见https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

原版的

模板(<template>或<ng-template>从4.x开始)作为嵌入视图添加并传递上下文.

使用let-colcontext属性在绑定模板中$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传递多个参数