在 ng-template 中将函数作为参数传递 Angular
Pass a function as an argument in an ng-template Angular
我有 4 个按钮,我希望它们执行不同的操作,但它们在不同图像下看起来都一样。所以我创建了一个 ng-template 来渲染它们。我的想法是将每个人将要调用的函数作为参数传递给 ng-template,但我找不到实现它的方法。
这是我的想法:
<ng-template #tempalte let-icon=icon let-action=action let-alt=alt>
<div (click)="action()">
<img src={{icon}} alt={{alt}}>
</div>
</ng-template>
我想做的事情有可能吗?还是我的逻辑错了,我做错了?
非常感谢!
您完全可以通过提供上下文来做到这一点。
<ng-container *ngTemplateOutlet="tempalte;context:ctx"></ng-container>
<ng-container *ngTemplateOutlet="tempalte;context:ctx2"></ng-container>
<ng-template #tempalte let-icon="icon" let-action="action" let-alt="alt">
<div (click)="action()">
<img src={{icon}} alt={{alt}}>
Button
</div>
</ng-template>
export class AppComponent {
ctx = { action: () => alert('button1') };
ctx2 = { action: () => alert('button2') };
我有 4 个按钮,我希望它们执行不同的操作,但它们在不同图像下看起来都一样。所以我创建了一个 ng-template 来渲染它们。我的想法是将每个人将要调用的函数作为参数传递给 ng-template,但我找不到实现它的方法。
这是我的想法:
<ng-template #tempalte let-icon=icon let-action=action let-alt=alt>
<div (click)="action()">
<img src={{icon}} alt={{alt}}>
</div>
</ng-template>
我想做的事情有可能吗?还是我的逻辑错了,我做错了?
非常感谢!
您完全可以通过提供上下文来做到这一点。
<ng-container *ngTemplateOutlet="tempalte;context:ctx"></ng-container>
<ng-container *ngTemplateOutlet="tempalte;context:ctx2"></ng-container>
<ng-template #tempalte let-icon="icon" let-action="action" let-alt="alt">
<div (click)="action()">
<img src={{icon}} alt={{alt}}>
Button
</div>
</ng-template>
export class AppComponent {
ctx = { action: () => alert('button1') };
ctx2 = { action: () => alert('button2') };