在 Angular 2 模板中传递变量

Question

有没有办法可以将变量传递给Angular2中的模板？

假设我有以下代码：

<div *ngFor="foo in foos">
    <ng-container *ngTemplateOutlet="inner"</ng-container>
</div>

---------------

<ng-template #inner>
    {{ foo.name }}
</ng-template>

如何让模板打印foo的name ？

Answer 1

你应该这样做：

<div *ngFor="foo in foos">
   <ng-container *ngTemplateOutlet="inner; context:foo"></ng-container>
</div>

<ng-template #inner let-name="name">
   {{ name }}
</ng-template>

Answer 2

但是，如果模板位于另一个组件中，则不起作用。 如何在这种情况下传递上下文对象？

我补充道
@Input() itemTemplate: TemplateRef<any>;

在我将使用它的组件中，在这个组件的模板中，我写这样的东西：

  <ng-container *ngTemplateOutlet="itemTemplate; context: item"></ng-container>

外部组件的模板代码：

<ng-template #dataRendererTpl let-data="data">
<div class="data">Hello, {{data.name}}</div>

只需将dataRendererTpl链接作为@Input（）属性传递给您需要它的组件

Answer 3

如果要将整个可迭代对象发送到模板，可以将数组传递到上下文中，如下所示：

<ng-container *ngTemplateOutlet="inner; context:foos"></ng-container>

<ng-template #inner let-foos="values()">
   <div *ngFor="foo in foos">
      {{ foo.name }}
   </div>
</ng-template>

Answer 4

在我的情况下，我需要对象保持完整，因为我有一些递归，这是有效的

<div *ngFor="foo in foos">
   <ng-container *ngTemplateOutlet="inner; context: {foo : foo}"></ng-container>
</div>

<ng-template #inner let-foo="foo">
   {{ foo.attributexy }}
</ng-template>

Answer 5

让我们在 ngTemplateOutletContext 或 ngTemplateOutlet 的上下文对象中使用 $implicit 键，因为它会将其值设置为默认值。

<div *ngFor="let foo of foos">
   <ng-container *ngTemplateOutlet="inner; context: { $implicit: foo}"></ng-container>
</div>

<ng-template #inner let-foo>
   {{ foo.name}}
</ng-template>

1. 这将帮助我们访问整个对象，即模板内的多个参数。
2. 然后，不存在let-foo应该匹配上下文对象默认值变量名称 (foo) 的依赖关系。 它可以是任何变量。

    <ng-template #inner let-user>
        {{ user.name}}
    </ng-template>

我假设，带有 ng-container 的 ng-template 和 div 在同一个组件中。

如果模板在其他组件中，请在模板 component.ts 中使用 @input() 装饰器