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

如何解决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>

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