角度2中隐含的是什么？

Question

如何在angular2 ng-templates中使用以下关键字

• $implicit角度2模板的目的是什么？
• let-<attribute>和之间的关系是什么$implicit？

Answer 1

您可以ng-template通过定义局部变量let-name

当angular通过调用创建模板时,createEmbeddedView它也可以传递将在内部使用的上下文ng-template

使用$implicit上下文对象中的键将其值设置为默认值.所以,如果我们写:

vcRef.createEmbeddedView(template, { $implicit: 'value' })

我们有模板

<ng-template let-foo> 
 {{ foo }}
</ng-template>

那么我们可以考虑一下

<ng-template let-foo="$implicit"> 
  {{ foo }}
</ng-template>

所以foo会平等的value

Plunker示例

另一方面,如果我们有上下文:

{ bar: 'value' }

我们必须声明变量,如:

let-foo="bar"

Answer 2

对于多个变量，您应该执行以下操作，模板将是：

<ng-template [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{$implicit: 'Hello', key2: 'value2', key3: 'value3'}"> </ng-template>

然后

<ng-template #template let-default let-key2="key2" let-key3="key3">
{{default}}
{{key2}}
{{key3}}
</ng-template>

所以，输出将是，

default = Hello
key2 = value2
key3 = value3

Answer 3

如果您只需将变量从我们引用它的容器传递到模板，我们可以使用

<ng-container *ngTemplateOutlet="deleteClient;context: firstName">
</ng-container>

并像这样使用它。

<ng-template #deleteClient let-client="firstName">
Are you sure? Want to remove {{ client }} !
</ng-template>

如果您必须将对象本身传递给模板，我们可以使用

<ng-container *ngTemplateOutlet="deleteClient;context: { $implicit: client }"> 
</ng-container>

并像这样使用它。

<ng-template #deleteClient let-client>
Are you sure? Want to remove {{ client.firstName }} {{ client.lastName }}!
</ng-template>