我在 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然后可以将其绑定到模板内部。
let-col
let-car="rowData"
col
car
资料来源:https ://www.primefaces.org/primeng/#/datatable/template
这种神奇的let-*语法叫什么?
let-*
它是如何工作的?
let-something和 和有什么不一样let-something="something else"?
let-something
let-something="something else"
更新角 5
ngOutletContext改名为ngTemplateOutletContext
ngOutletContext
ngTemplateOutletContext
另请参阅CHANGELOG.md @ angular/angular
原来的
模板(<template>或<ng-template>自 4.x 起)作为嵌入式视图添加并传递上下文。
<template>
<ng-template>
使用let-colcontext 属性$implicit可以col在模板中进行绑定。使用let-foo="bar"context 属性bar作为foo.
$implicit
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也以这种方式工作。规范的语法使这一点更加明显
*ngFor
<ng-template ngFor let-item [ngForOf]="items" let-i="index" let-odd="odd"> <div>{{item}}</div> </ng-template>
whereNgFor将模板作为嵌入视图添加到每个的 DOM 中item,并在上下文中items添加一些值 ( item, index, )。odd
NgFor
item
items
index
odd