如何將表達式作爲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>內，您可以使用所需的表達