如何将表达式作为Angular2中的输入传递给组件? [英] How to pass an expression to a component as an input in Angular2?

问题描述

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

I need to pass an expression to a component that will be evaluated inside an component's template.

例如，组件:

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

带有组件的模板:

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

MyComponent的用法:

Usage of MyComponent:

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

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

As there will be more than one input, I would like to avoid usage of TemplateRef.

推荐答案

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

Maybe one of this options can helps you:

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

1) Using ngForTemplate input property of NgFor directive:

组件

@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>内部，您可以使用所需的表达式

This way inside of <ng-template let-item>...</ng-template> you can use desired expression

这篇关于如何将表达式作为Angular2中的输入传递给组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！