我在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 =“别的东西”有什么区别?
可以使用< ng-container>重写上述代码吗?而不是< template>没有改变最终的DOM结构?
更新Angular 5
ngOutletContext已重命名为ngTemplateOutletContext
另见https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29
原版的
模板(< template>或< ng-template> from 4.x)作为嵌入视图添加并传递上下文.
使用let-col,上下文属性$implicit在模板中可用作绑定.
使用let-foo =“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" [ngOutletContext]="{ $implicit: 'some col value',bar: 'some bar value' }" ></ng-template>
另见this answer和ViewContainerRef#createEmbeddedView.
* ng也是这样的.规范语法使这更加明显
<ng-template let-item [ngForOf]="items" let-i="index" let-odd="odd"> <div>{{item}} </ng-template>