在ng模板Angular中传递一个函数作为参数

Question

我有4个按钮，希望它们执行不同的操作，但它们在不同的图像中看起来都一样。所以我创建了一个ng模板来渲染它们。我的想法是把每个人都要调用的函数作为ng模板中的一个参数来传递，但我找不到方法

这是我的想法：

<ng-template #tempalte let-icon=icon let-action=action let-alt=alt>
<div (click)="action()">
<img src={{icon}} alt={{alt}}>
</div>
</ng-template>

我想做的事情有可能吗？或者是我的逻辑错了，我犯了一个错误？

非常感谢！

Answer 1

您完全可以通过提供上下文来做到这一点。

<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') };

这是stackblitz演示