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

【问题标题】：What is let-* in Angular 2 templates?Angular 2 模板中的 let-* 是什么？
【发布时间】：2017-08-16 03:03:46
【问题描述】：

我在 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="something else" 有什么区别？

【问题讨论】：

@NiekT。这是不同的，角 2 中的 let-* 是模板变量作用域
angular.io/docs/ts/latest/guide/… 搜索单词“let”（带空格）并转到第 9 个左右。这个模板变量的作用有一个很好的解释
@SterlingArcher 感谢您的指正，我自己对 JS 和 Angular 还是很陌生。

标签： angular angular2-template primeng

【解决方案1】：

更新 Angular 5

ngOutletContext 更名为ngTemplateOutletContext

另见CHANGELOG.md @ angular/angular

原创

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

使用let-col，上下文属性$implicit 在模板中以col 的形式用于绑定。使用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>

另请参阅 this answer 和 ViewContainerRef#createEmbeddedView。

*ngFor 也以这种方式工作。规范的语法使这一点更加明显

<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）。

另见Using $implict to pass multiple parameters

【讨论】：

感谢ngOutletContext 的解释。这是我已经知道的信息与我在文档中找不到的信息之间缺失的链接。
我不认为它被称为 ngTemplateOutletContext，正如您在 Angular 5 版本中所建议的那样。文档也没有提到它被弃用的任何内容。 angular.io/api/common/NgTemplateOutlet
5 尚未发布。不确定文档显示了什么。从那时起，更新日志就没有任何新内容了。
感谢您的回答，关于 * 语法的作用的文档非常缺乏。
不应该是第二个 ng-template（带有 ngTemplateOutlet 的那个）真正的 ng-template。也许 ng-container 会更好？我猜两者都会起作用，但 ng-container 在语义上更正确。还是我错了？

【解决方案2】：

Angular 微语法允许您以紧凑、友好的字符串配置指令。微语法解析器将该字符串转换为<ng-template> 上的属性。 let 关键字声明了您在模板中引用的模板输入变量。

【讨论】：

作为一个真正难以理解这一点的人，这个答案还不如拉丁文。