Angular双向绑定异常：变量名改为mensaje后无法正常工作

问题现象 #

实现Angular父子组件双向数据共享时出现异常：

• 父组件用 [(mensaje)]="mensajePadre" 与子组件绑定，父组件值能正常同步到子组件输入框；
• 子组件输入内容后点击按钮传值，父组件无法接收更新后的数据；
• 但将父组件绑定变量名改为size（即[(size)]="mensajePadre"）后，双向数据共享功能完全正常。

相关代码 #

父组件代码

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Hola Mundo Angular¡';
fontSizePx = "";
mensajePadre="";
}

父组件模板

<!-- 失效的绑定方式 -->
<app-sizer [(mensaje)]="mensajePadre"></app-sizer>
<input id="font-size" [(ngModel)]="mensajePadre"/>

子组件代码

export class SizerComponent implements OnInit {

  @Input() mensaje: string;
  @Output() sizeChange = new EventEmitter<string>();

  constructor() { }

  ngOnInit(): void {
  }

  enviarPadre(){
    this.sizeChange.emit(this.mensaje);
  }
}

子组件模板

<input type="text" [(ngModel)]="mensaje" name="pixel" #pixel>
<button type="button" (click)="enviarPadre()">Enviar a Padre</button>

原因分析 #

核心问题在于Angular双向绑定的语法糖规则：[(x)] 是 [x] 输入属性绑定 + (xChange) 输出事件绑定的简写形式。

• 使用 [(mensaje)] 时，Angular会自动查找子组件中名为 mensajeChange 的@Output事件发射器；
• 但你的子组件中定义的输出事件是 sizeChange，和输入属性mensaje不匹配，导致父组件无法监听正确的更新事件，因此接收不到子组件传回的值；
• 换成 [(size)] 时，输入属性隐式匹配@Input() size，同时输出事件是sizeChange，完全符合语法糖的命名规则，所以双向绑定正常工作。

解决方案 #

修改子组件的输出事件名称，使其与输入属性保持[属性名]Change的对应关系：

export class SizerComponent implements OnInit {

  @Input() mensaje: string;
  // 将sizeChange改为mensajeChange，与输入属性mensaje对应
  @Output() mensajeChange = new EventEmitter<string>();

  constructor() { }

  ngOnInit(): void {
  }

  enviarPadre(){
    this.mensajeChange.emit(this.mensaje);
  }
}

修改后，父组件的[(mensaje)]="mensajePadre"绑定即可正常实现双向数据共享，子组件点击按钮后，父组件的mensajePadre会同步更新。

内容的提问来源于stack exchange，提问作者ALEXANDER JOSE TAYPE LUYO