Angular自定义多输入组件与父组件ngModel绑定关联问题

父组件ngModel的绑定对象 #

父组件的[(ngModel)]并不是直接绑定到自定义组件的某一个输入框，而是绑定到自定义组件的**value输入属性**（以及对应的valueChange输出事件）——这是Angular双向绑定的默认规则。

背后的原理 #

1. Angular双向绑定的核心规则 #

Angular的[(x)]语法是[x]（输入绑定）和(xChange)（输出绑定）的语法糖。当父组件用[(ngModel)]绑定自定义组件时，默认会寻找组件上的@Input() value和@Output() valueChange: EventEmitter<any>，通过这对输入输出来实现双向同步：

• 父组件的external值变化时，会同步到自定义组件的value输入属性；
• 自定义组件通过valueChange.emit(新值)触发事件，父组件会自动更新external的值。

2. 初始状态下的同步差异 #

• 绑定value的输入框：应该是直接和value属性做了双向绑定（比如[(ngModel)]="value"，或者[value]="value" (input)="valueChange.emit($event.target.value)"）。所以父组件external变化时，value更新，输入框同步；输入框变化时触发valueChange，父组件external也跟着更新，形成完整的双向同步。
• 绑定test的输入框：初始没有和value属性或valueChange事件关联。它的变化不会触发valueChange事件，所以父组件的external不会更新；同时父组件external变化只会更新value属性，不会同步到test输入框，因此无法同步。

3. 添加setter后的同步逻辑 #

给test添加关联onChange的setter，本质是把test的变化和value属性、valueChange事件关联起来：

• 当test输入框的值变化时，setter会更新value属性，进而触发valueChange.emit()，让父组件的external同步更新；
• 当父组件external变化更新value属性时，setter也会把value的值同步到test输入框，从而实现test输入框和父组件external的双向同步。

内容的提问来源于stack exchange，提问作者user1169587