角度2中隐含的$是什么?

时间:2017-07-12 10:39:52

标签: angular ng-template

如何在angular2 ng-templates

中使用以下关键字
  • 角度2模板中$implicit的目的是什么?
  • let-<attribute>$implicit之间的关系是什么?

4 个答案:

答案 0 :(得分:36)

您可以在ng-templatelet-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 Example

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

{ bar: 'value' }

我们必须声明变量,如:

let-foo="bar"

答案 1 :(得分:1)

对于多个变量,您应该执行以下操作, 模板为:

<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

答案 2 :(得分:0)

如果您只需要将变量从引用它的容器传递到模板,则可以使用

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

答案 3 :(得分:0)

我已经使用 $implicit 将值传递给 ng-template,动态地为标题创建一个锚标签。 $implicit 用于向 ng-template 传递数据

<ng-container [ngTemplateOutlet]=" col.bodyTemplate"
                        [ngTemplateOutletContext]="{$implicit: product}">
 </ng-container>

<ng-template #productTitle let-product> // let-product-> declaring local variable
    <a [routerLink]="['/products', product.Id]" [queryParams]="{searchText:searchText}">
        {{product.Title}}</a>
</ng-template>