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

Question

我在 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"之间有什么区别？

- Steven Liekens

---

@NiekT，这是不同的，Angular 2中的let-*是模板变量作用域。 - Sterling Archer

请搜索含有一个空格的单词 "let"，并跳转至大约第九个出现的位置。那里有一个很好的解释，介绍了这个模板变量的作用。该介绍在 https://angular.io/docs/ts/latest/guide/structural-directives.html#!#template-input-variable 页面上。 - Sterling Archer

@SterlingArcher 感谢您的纠正，我自己对JS和Angular也很新。 - Nodon Darkeye

Answer 1

更新Angular 5

ngOutletContext更名为ngTemplateOutletContext

另请参见CHANGELOG.md @ angular/angular

原始内容

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

使用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>

另请参阅此答案和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）。

另请参阅使用$implicit传递多个参数

- Günter Zöchbauer

---

感谢您解释 ngOutletContext。这是我已知的和文档中找不到的信息之间的缺失链接。 - Steven Liekens

我不认为它被称为ngTemplateOutletContext，正如你在Angular 5的发布中所建议的那样。文档也没有提到它已被弃用。https://angular.io/api/common/NgTemplateOutlet - Jessy

5尚未发布。不确定文档显示了什么。自那时以来，变更日志中没有任何新内容。 - Günter Zöchbauer

谢谢您的回答，关于“*”语法的具体作用，文档上缺乏明确的说明。 - dook

@user8348978 我自己不是很清楚细节，但这是由Angular渲染的一部分，然后将结果插入到DOM中。在这种情况下，是针对items的每个项目。 - Günter Zöchbauer

Answer 2

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

- dontry

---

作为一个真正难以理解的人，这个答案简直就像拉丁文一样难懂。 - Adam Hughes