如何將表達式作為Angular2中的輸入傳遞給組件？

Question

我需要將表達式傳遞給將在組件模板中進行求值的組件。

例如，組件：

@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。

Answer 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>您可以使用所需的表達式