Angular 12 - 双向绑定(bind)给出错误 : The property and event halves of the two-way binding 'prop_name' are not bound to the same target

Question

从 Angular 11 迁移到 Angular 12 并弹出此问题:

“错误:双向绑定(bind)“值”的属性和事件部分未绑定(bind)到同一目标。”

父页面组件:

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [(value)]="counterValue"></app-child>
  `,
  styles: []
})
export class ParentComponent {
  counterValue = 0;
}

子组件:

import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    {{ value }}
  `,
  styles: []
})
export class ChildComponent {
  @Input() value = 0;
  @Output() incrementValue = new EventEmitter<number>();

  increase(): void {
    this.value++;
    this.incrementValue.emit(this.value);
  }
}

这是一个stackblitz供您自行测试的代码:

这是一个错误吗？还是我遗漏了什么？

Answer 1

我只是使用变通方法继续开发，同时解决此问题。

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [value]="counterValue" (incrementValue)="onChange($event)"></app-child>
  `,
  styles: []
})
export class ParentComponent {
  counterValue = 0;
  onChange(n:number) {
    this.counterValue = n;
  }
}