我需要将表达式传递给组件，该表达式将在组件的模板内进行评估。
例如，组件：
@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。
也许以下选项之一可以帮助您：
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>;
}
父母
<app-my-component [items]="listOfItems">
<ng-template let-item>[{{item.id}}] {{item.name}}</ng-template>
</app-my-component>
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>
这样<ng-template let-item>...</ng-template>您就可以使用所需的表达式
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句