0

在 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，那么 counter 就等于 2。第二次，newValue 还是等于 2，那么 counter 就等于 2。这样，下一次点击，我不能再增加计数器了。

似乎在这段代码increaseCounter(counter + 1)中，即使计数器的实际值已更改为 2，计数器也始终等于 1。这种代码方法适用于 Angular 6、8，但从 Angular 12 和 Ivy 开始，这种方式不工作。

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

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

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

4

0 回答 0