如何将表达式作为Angular2中的输入传递给组件？答案

【问题标题】：How to pass an expression to a component as an input in Angular2?如何将表达式作为Angular2中的输入传递给组件？
【发布时间】：2016-10-11 09:22:42
【问题描述】：

我需要将表达式传递给将在组件模板中进行评估的组件。

例如组件：

@Component({
  selector: 'app-my-component',
  ...
})
export class MyComponent {
  @Input items: MyClass;
  @Input expression: String;
  ...
}

带有组件的模板：

<div *ngFor="let item of items">
  {{expression}}
</div>

MyComponent 的使用：

<app-my-component [items]="listOfItems" [expression]="'[item.id] item.name'">
</app-my-component>

由于会有多个输入，我想避免使用 TemplateRef。

【问题讨论】：

'[item.id] item.name' 应该做什么？这在我看来不像是一种表达方式。你不能传递绑定。
将其作为[expression]=" '{"id":[item.id],"name": item.name}' " 传递并用作expression.id 和expression.name
@GünterZöchbauer 这应该评估为字符串，对于 item = {"id": 1, "name" : "Item1"} to [1] Item1
@AtalKishore 我需要输入“表达式”是通用的，所以在 MyComponent 的视图中，我可以将其作为要评估的表达式或模板传递，而不知道它的结构
然后使用[expression]=" '[' + item.id + '] ' + item.name "

标签： angular angular2-components

【解决方案1】：

也许其中一个选项可以帮助您：

1) 使用 NgFor 指令的ngForTemplate 输入属性：

组件

@Component({
  selector: 'app-my-component',
  template: `
  <div *ngFor="let item of items template: itemTemplate"></div>`
})
export class MyComponent {
  @Input() items: any;
  @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>;
}

家长

<app-my-component [items]="listOfItems">
  <ng-template let-item>[{{item.id}}] {{item.name}}</ng-template>
</app-my-component>

Plunker

2) 使用NgTemplateOutlet 指令

组件

@Component({
  selector: 'app-my-component',
  template: `
  <div *ngFor="let item of items">
    <ng-template [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
  </div>`
})
export class MyComponent {
  @Input() items: any;
  @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>;
}

父级保持不变：

<app-my-component [items]="listOfItems">
  <ng-template let-item>[{{item.id}}] {{item.name}}</ng-template>
</app-my-component>

Plunker

这种方式在<ng-template let-item>...</ng-template> 内部可以使用所需的表达式

【讨论】：

第一个似乎不再起作用了。除了更改为ng-template 之外，我不知道为什么它对我不起作用。它没有给我任何物品，但是当我使用错误的let-* 属性时会出错...