在 ng-template Angular 中将函数作为参数传递答案

【问题标题】：Pass a function as an argument in an ng-template Angular在 ng-template Angular 中将函数作为参数传递
【发布时间】：2021-05-09 12:42:21
【问题描述】：

我有 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>

我正在尝试做的事情是否可能？还是我的逻辑错了，我犯了错误？

非常感谢！

【问题讨论】：

标签： angular ng-template

【解决方案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 demo

【讨论】：