为何手动修改子组件@Input属性时ngOnChanges()未触发？

核心原因 #

ngOnChanges只在父组件通过数据绑定更新子组件的@Input属性时才会触发。子组件内部直接给@Input属性赋值的操作，Angular不会认定为“外部数据绑定的变更”，自然不会触发这个生命周期钩子。

你代码里的changeColor方法直接修改this.color，属于子组件内部的自我修改，完全绕开了Angular的输入绑定数据流机制，所以ngOnChanges不会有反应。

结合你的代码分析 #

看你的子组件代码片段：

@Input() color : any;

changeColor(color: any){
   this.color = color; // 直接修改内部属性，并非父组件通过绑定传递的变更
   this.cd.detectChanges();
}

这里的修改是子组件自己完成的，Angular的变更检测系统只监控父组件到子组件的输入绑定更新，内部修改不在它的监控触发范围内。另外你调用的detectChanges()只是强制更新视图，和ngOnChanges的触发条件无关。

要触发ngOnChanges的正确做法 #

如果希望修改color时触发ngOnChanges，得让变更来自父组件的绑定更新，步骤如下：

1. 子组件通过@Output向父组件发送修改请求
2. 父组件更新自身的color状态，再通过输入绑定传递给子组件，此时ngOnChanges就会正常触发

修改后的子组件代码 #

@Input() color : any;
@Output() colorChange = new EventEmitter<string>();

changeColor(color: any){
   this.colorChange.emit(color); // 通知父组件执行更新
}

父组件模板代码 #

<app-child [color]="parentColor" (colorChange)="parentColor = $event"></app-child>

这样点击子组件按钮时，子组件会通知父组件修改parentColor，父组件的变更通过输入绑定同步给子组件，ngOnChanges就会被触发。

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