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

154

我在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"？

angular angular2-template primeng

— 史蒂文·里肯斯
source

@NiekT。这是不同的，let- *在角度2中是模板变量作用域

— Sterling Archer

angular.io/docs/ts/latest/guide/…搜索单词“ let”（带空格），然后转到第9个。关于此模板变量的作用有一个很好的解释

— Sterling Archer

@SterlingArcher感谢您的更正，我本人对JS和Angular还是陌生的。

— Nodon Darkeye，

Answers:

152

更新Angular 5

ngOutletContext 被重命名为 ngTemplateOutletContext

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

原版的

模板（<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>

其中NgFor添加模板作为嵌入视图到DOM每个item的items，并增加了几个值（item，index，odd）上下文。

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

— 贡特·佐赫鲍尔（GünterZöchbauer）
source

感谢您的解释ngOutletContext。那就是我已经知道的信息和我在文档中找不到的信息之间缺少的链接。

— 史蒂文·里肯斯

我不认为它是ngTemplateOutletContext您在angular 5发行版中所建议的那样。文档也没有提及它已被弃用的任何内容。angular.io/api/common/NgTemplateOutlet

— Jessy

5尚未发布。不知道文档显示了什么。从那以后，变更日志没有任何新内容。

— 君特Zöchbauer

感谢您提供此答案，关于*语法的操作非常缺乏文档。

— dook

不应是第二个ng-template（带有ngTemplateOutlet的第二个），而是真正的ng-template。也许ng-container会更好？我猜两者都可以工作，但是ng-container在语义上更正确。还是我错了？

— Ondrej Peterka，

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

— Dontry
source