Angular中ngOnChanges无法监听表单输入变更的问题排查

• 首先明确ngOnChanges的固定触发规则：仅当组件接收的、被@Input装饰的属性发生引用级别的整体赋值变更时，钩子才会执行。它既不会监测组件内部自有属性的变化，也不会监测引用类型对象的内部状态修改。
• 你当前的实现中，favoriteColorControl是在AppComponent内部直接初始化的实例，没有任何外部父组件向它传入新的控件引用。表单输入时变更的只是这个FormControl实例内部的value属性，整个控件对象的内存引用从未发生变化，因此ngOnChanges从触发逻辑上就不会执行。
• 你之前尝试搭建子组件传值仍未触发的原因也和上述规则一致：如果你传递给子组件的是同一个FormControl引用，输入修改的依然是控件内部的状态、没有改变传入子组件的@Input值的引用，子组件的ngOnChanges自然也不会触发。
• 补充：你在组件文件中重复导入ReactiveFormsModule的写法属于冗余代码，模块已经在app.module.ts中全局导入后，组件文件无需重复导入对应模块，不影响功能但属于无意义写法。

场景1：仅需监测当前组件内部的表单输入值变化 #

这是你的实际使用场景，无需依赖ngOnChanges，直接使用响应式表单内置的valueChanges可观察对象实现变更监听即可，示例代码：

import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  // 移除无意义的@Input装饰，该控件为组件内部自有状态
  favoriteColorControl = new FormControl('');
  // 保存订阅实例，组件销毁时主动取消避免内存泄漏
  private controlValueSub!: Subscription;

  ngOnInit(): void {
    this.controlValueSub = this.favoriteColorControl.valueChanges.subscribe(currentValue => {
      // 替换你原本写在ngOnChanges里的逻辑
      console.log('当前输入值：', currentValue);
    })
  }

  ngOnDestroy(): void {
    this.controlValueSub.unsubscribe();
  }
}

场景2：需在父子组件传值场景中使用ngOnChanges监测变更 #

如果确实需要靠ngOnChanges触发逻辑，必须保证传给子组件的@Input属性是整体替换的新引用，而非修改原引用的内部状态：

• 对原始类型（字符串、数字、布尔值）：直接给@Input属性赋新值即可触发
• 对引用类型（对象、数组、FormControl实例）：必须给@Input属性重新赋值一个全新的实例，而非修改原实例的内部属性。比如给子组件传表单值时，每次都创建新的FormControl实例传递，才会触发子组件的ngOnChanges

注意：这种为了触发ngOnChanges频繁新建控件实例的写法完全不符合响应式表单的设计逻辑，会带来不必要的性能损耗和内存隐患，不推荐在实际开发中使用。

内容的提问来源于stack exchange，提问作者Thomas David Kehoe