能否为Angular的ngModel双向绑定使用带-Change后缀的变更方法？

结论先行：这种带-Change后缀的自动触发机制，只适用于自定义组件的双向绑定，不适用于原生<input>或第三方组件（如<ng-select>）的ngModel绑定。

原因拆解 #

1. 自定义组件双向绑定的本质
   自定义组件的[(myProp)]="val"是Angular的语法糖，等价于：

   <custom-component [myProp]="val" (myPropChange)="val=$event"></custom-component>
   

   这里的myPropChange是自定义组件内部定义的@Output事件发射器，当组件触发该事件时，Angular会自动更新父组件的val变量。但父组件不需要手动写同名方法，除非你显式把事件绑定到方法上——这和你想的“自动触发父组件里的valueChange方法”不是一回事。

2. ngModel双向绑定的逻辑
   [(ngModel)]="value"的语法糖等价于：

   <input [ngModel]="value" (ngModelChange)="value=$event">
   

   它的核心是自动完成变量赋值，并不会自动关联到你组件里的valueChange方法。Angular没有预设“当ngModel值变化时，自动调用组件内同名-Change方法”的逻辑。

3. ngModelChange的触发条件
   你尝试的ngModelChange是ngModel暴露的输出事件，必须显式绑定到方法才会触发，这是Angular的设计规则——语法糖只帮你做赋值，额外逻辑需要手动绑定。

替代解决方案 #

如果不想每次都写显式的(ngModelChange)绑定，可以用以下方式实现值变化监听：

使用变量的setter监听

把组件内的value改成getter/setter形式，值变化时自动执行逻辑：

@Component(...)
export class SomeComponent {
  private _value: Person;

  get value(): Person {
    return this._value;
  }

  set value(newVal: Person) {
    this._value = newVal;
    console.log('success');
    // 这里添加你的值变化处理逻辑
  }
}

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