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

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

原始

模板(从4.x开始为<template>或<ng-template>)被添加为嵌入式视图并获得上下文.

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 embedded view to the DOM for each item of items and adds a few values (item, index, odd) to the context.

另请参见使用$ implict传递多个参数

这篇关于Angular 2模板中的let- *是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！