Angular自定义组件双向绑定不生效问题求助

我来帮你排查下这个问题～你的代码其实已经踩对了双向绑定的核心规则（@Input() value + @Output() valueChange的命名配对），只是有个破坏数据流的小操作导致了问题，咱们来修正它：

首先说问题所在：你在子组件的onInputChange方法里直接修改了@Input()装饰的this.value属性——在Angular的单向数据流规则里，子组件不应该直接修改父组件传过来的输入属性！你这一步操作会和双向绑定的语法糖逻辑冲突，导致父组件的parentValue无法正确同步更新。

接下来是具体的修正步骤：

1. 修改子组件的事件处理方法
   删掉onInputChange里的this.value = newValue;这一行，只保留emit新值的逻辑：

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

@Component({
  selector: 'app-custom-input',
  template: `<input [value]="value" (input)="onInputChange($event)" />`
})
export class CustomInputComponent {
  @Input() value: string = '';
  @Output() valueChange = new EventEmitter<string>();

  onInputChange(event: any) {
    const newValue = event.target.value;
    // 移除 this.value = newValue; 这行代码
    this.valueChange.emit(newValue);
  }
}

2. （可选）简化模板写法
   甚至可以直接把事件处理逻辑写到模板里，省去额外的方法，代码更简洁：

<input [value]="value" (input)="valueChange.emit($event.target.value)" />

为什么这样改就会生效？因为Angular的[(value)]双向绑定是语法糖，它会被自动解析成：

<app-custom-input [value]="parentValue" (valueChange)="parentValue = $event"></app-custom-input>

当子组件通过valueChangeemit新值后，父组件的parentValue会被自动更新，然后父组件再把更新后的parentValue传递回子组件的@Input() value，这样子组件的输入框内容和父组件的变量就会完美同步了。

另外再确认下：父组件所在的模块已经正确声明了CustomInputComponent，这是组件能正常使用的基础哦。

修改完成后你再测试下，输入框里的内容应该会实时同步到父组件的{{ parentValue }}里啦～

内容来源于stack exchange