Angular中通过代码修改值时ngModelChange未触发的原因咨询

我编写了如下Angular代码：

HTML代码 #

<input (ngModelChange)="onSelection()" [(ngModel)]="selectedNode" >

<button (click)="settest();">
     click to change value (but does not fire ngModelChange)
</button>

TypeScript代码 #

selectedNode: string = '';

onSelection() {
  alert('changed');
}

settest() {
  this.selectedNode = 'test';
}

现象：当我在输入框中手动输入内容时，onSelection()方法会被调用；但通过点击按钮调用settest()修改selectedNode的值时，ngModelChange事件并未触发，可我期望此时该事件能执行对应的逻辑。

原因说明 #

ngModelChange本质是视图驱动模型更新时触发的事件：只有当用户在视图（比如输入框）中进行手动操作（输入、选择等），导致视图值变化并同步到模型变量时，这个事件才会被Angular触发。

而通过代码直接修改模型变量（比如this.selectedNode = 'test'）属于模型驱动视图更新的场景，Angular此时只会把模型的新值同步到视图上，不会触发ngModelChange事件——因为这个事件的设计初衷就是响应用户在视图上的交互操作。

解决方案 #

如果需要在代码修改模型值时也执行onSelection()的逻辑，有两种常用方式：

方式1：直接在修改模型的方法中调用目标函数

settest() {
  this.selectedNode = 'test';
  this.onSelection(); // 手动调用逻辑
}

方式2：用RxJS Subject监听变量变化（更优雅的响应式方案）

通过BehaviorSubject包装变量，订阅其变化，这样不管是视图操作还是代码修改，都能统一触发回调：

import { BehaviorSubject } from 'rxjs';

// ...

private selectedNodeSubject = new BehaviorSubject<string>('');
selectedNode: string = '';

ngOnInit() {
  // 订阅变量变化
  this.selectedNodeSubject.subscribe(value => {
    this.selectedNode = value;
    this.onSelection();
  });
}

onSelection() {
  alert('changed');
}

settest() {
  this.selectedNodeSubject.next('test'); // 通过Subject更新值
}

对应的HTML需要调整为：

<input [(ngModel)]="selectedNode" (ngModelChange)="selectedNodeSubject.next($event)">

<button (click)="settest();">
     click to change value (will fire the callback now)
</button>

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