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

我需要将一个表达式传递给将在组件模板内计算的组件。

例如，组件：

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

与组件的模板：

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

我的组件的用法：

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

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

也许以下选项之一可以帮助您：

1）使用ngForTemplateNgFor 指令的输入属性：

成分

@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>;
}

Parent

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

Plunker https://plnkr.co/edit/Li79ynezvpWuSzFDOG66?p=preview

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

Parent保持不变：

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

Plunker https://plnkr.co/edit/u2NXVTeSh6NFPPpkfNVe?p=preview

这样里面<ng-template let-item>...</ng-template>你可以使用想要的表达方式