Question

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

我们说我有以下代码：

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

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

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

如何让模板打印name的{{1}}？

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

在我的情况下，我需要保持对象完整无缺，因为我进行了某种递归操作，

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

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

我添加了
@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 4

如果要将整个可迭代对象发送到模板，可以按以下方式将数组传递给上下文：

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

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

在Angular 2模板中传递变量

4 个答案: