Angular 2 模板中的 let-* 是什么？

小编典典

Angular 2 模板中的 let-* 是什么？

all

我在 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/template

这种神奇的let-*语法叫什么？

它是如何工作的？

let-something和和有什么不一样let-something="something else"？

阅读 101

2022-07-01

共1个答案

小编典典

更新角 5

ngOutletContext改名为ngTemplateOutletContext

另请参阅CHANGELOG.md @
angular/angular

原来的

模板（<template>或<ng-template>自 4.x 起）作为嵌入式视图添加并传递上下文。

使用let-colcontext 属性$implicit可以col在模板中进行绑定。使用let-foo="bar"context
属性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>

whereNgFor将模板作为嵌入视图添加到每个的 DOM 中item，并在上下文中items添加一些值 ( item, index,
)。odd

2022-07-01