在Angular 2模板中传递变量

Question

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

假设我有以下代码:

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

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

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

我怎样才能获得模板打印name的foo？

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() 属性传递给您需要它的组件