Angular 2 模板中的 let-* 是什么? [英] What is let-* in Angular 2 templates?
问题描述
我在 Angular 2 模板中发现了一个奇怪的赋值语法.
I came across a strange assignment syntax inside an Angular 2 template.
<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 然后可以绑定到模板内部.
It appears that let-col and let-car="rowData" create two new variables col and car that can then be bound to inside the template.
来源:https://www.primefaces.org/primeng/#/datatable/模板
这个神奇的 let-* 语法叫什么?
What is this magical let-* syntax called?
它是如何工作的?
let-something 和 let-something="something else" 有什么区别?
推荐答案
更新 Angular 5
ngOutletContext 重命名为 ngTemplateOutletContext
原创
模板( 或
Templates (<template>, or <ng-template> since 4.x) are added as embedded views and get passed a context.
使用 let-col，上下文属性 $implicit 在绑定模板中作为 col 可用.使用 let-foo=bar"，上下文属性 bar 可用作 foo.
With let-col the context property $implicit is made available as col within the template for bindings.
With let-foo="bar" the context property bar is made available as 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 also works this way. The canonical syntax makes this more obvious
<ng-template ngFor let-item [ngForOf]="items" let-i="index" let-odd="odd">
<div>{{item}}</div>
</ng-template>
其中 NgFor 为 items 的每个 item 将模板作为嵌入视图添加到 DOM 并添加一些值(item, index, odd) 到上下文.
where NgFor adds the template as an embedded view to the DOM for each item of items and adds a few values (item, index, odd) to the context.
这篇关于Angular 2 模板中的 let-* 是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
