ngTemplateOutletContext 不适用于 Angular Ivy 中的 function.bind(this)

问题描述

在 Angular 12 版本中，我打算在用户每次点击按钮时将计数器增加 1。

在 *.component.html 中：

<ng-container [ngTemplateOutlet]="defaultCounterTemplate"
  [ngTemplateOutletContext]="{ counter: counter,increaseCounter: increaseCounter.bind(this) }">
</ng-container>

<ng-template #defaultCounterTemplate let-counter="counter" let-increaseCounter="increaseCounter">
  <p>{{ counter }}</p>
  <button type="button" class="btn btn-primary" (click)="increaseCounter(counter + 1)">
    Increase
  </button>
</ng-template>

在 *.component.ts 中

public counter: number = 1;

public increaseCounter(newValue: number) {
    this.counter = newValue;
  }

第一次点击按钮时，newValue 等于2，那么计数器就等于2。第二次，newValue 仍然等于2，那么计数器就等于2。这样，下次我点击，我不能再增加计数器了。

似乎在此代码 increaseCounter(counter + 1) 中，即使计数器的实际值已更改为 2，计数器也始终等于 1。这种代码方法适用于 Angular 6、8，但来自 Angular 12对于 Ivy，这种方法行不通。

即使我使用当前使用 ngTemplateOutlet 的建议，它也不起作用。

<ng-container *ngTemplateOutlet="defaultCounterTemplate,context: { counter: counter,increaseCounter: increaseCounter.bind(this) }">
</ng-container>

请帮我解决这个问题。多谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular ivy ivy