Angular >=6 组件内部变化检测：如何监听组件内（含输入字段）的变化？

嘿，这个问题问得好！确实，ngOnChanges()只能帮我们监听父组件传入的@Input属性的变化，但如果要追踪组件内部状态（比如基于输入衍生的变量、用户交互修改的本地属性）的变化，我们有几种靠谱的方案：

1. 用Setter包装内部状态（或@Input衍生属性） #

如果你的内部属性依赖@Input生成，或者需要在它被修改时立即触发逻辑，给这个内部变量加个setter是最简单的方式。不管是从外部输入衍生初始化，还是组件内部主动修改，setter都会捕获到变化：

@Component({
  selector: 'app-my-component',
  template: `...`
})
export class MyComponent {
  private _internalValue: string;
  @Input() parentInput: string;

  get internalValue(): string {
    return this._internalValue;
  }
  set internalValue(newValue: string) {
    // 对比新旧值，避免无意义的重复触发
    if (newValue !== this._internalValue) {
      this._internalValue = newValue;
      // 触发自定义的变化处理逻辑
      this.handleInternalChange();
    }
  }

  ngOnInit() {
    // 用父组件输入初始化内部变量
    this.internalValue = this.parentInput + '_suffix';
  }

  private handleInternalChange() {
    console.log('内部值更新啦:', this._internalValue);
    // 这里可以做更新视图、请求数据等操作
  }

  // 组件内部主动修改状态的方法
  updateInternalValue() {
    this.internalValue = '手动修改的新值';
  }
}

2. 用RxJS的Subject/BehaviorSubject追踪状态变化 #

如果你的内部状态比较复杂，或者需要多个地方同步响应变化，RxJS的可观察对象是个绝佳选择。它能帮你把状态变成“可订阅”的流，每次更新都会通知所有订阅者：

import { BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-my-component',
  template: `...`
})
export class MyComponent {
  @Input() parentInput: string;
  // BehaviorSubject会保存当前值，新订阅者能立即拿到最新状态
  private internalState$ = new BehaviorSubject<string>('');

  ngOnInit() {
    // 用父输入初始化状态
    this.internalState$.next(this.parentInput + '_initial');
    
    // 订阅状态变化
    this.internalState$.subscribe(newState => {
      console.log('内部状态更新:', newState);
      // 处理变化逻辑
    });
  }

  // 修改内部状态的方法
  updateState(newState: string) {
    this.internalState$.next(newState);
  }

  // 如果父输入变化，同步更新内部状态
  ngOnChanges(changes: SimpleChanges) {
    if (changes['parentInput']) {
      this.internalState$.next(changes['parentInput'].currentValue + '_updated');
    }
  }
}

这种方式还能直接在模板里用async管道绑定状态，非常方便。

3. 用ngDoCheck()手动检测变化 #

Angular的ngDoCheck()钩子会在每次变更检测周期运行（不管有没有实际变化），你可以在这里手动对比新旧状态，找出变化。不过要注意：这个钩子运行频率极高，一定要避免在里面做重操作，否则会拖慢性能。

@Component({
  selector: 'app-my-component',
  template: `...`
})
export class MyComponent {
  @Input() parentInput: string;
  private previousInternalValue: string;
  internalValue: string;

  ngOnInit() {
    this.internalValue = this.parentInput + '_init';
    this.previousInternalValue = this.internalValue;
  }

  ngDoCheck() {
    // 对比当前值和之前保存的旧值
    if (this.internalValue !== this.previousInternalValue) {
      console.log('internalValue发生变化:', this.internalValue);
      // 更新旧值，避免重复触发
      this.previousInternalValue = this.internalValue;
      // 处理变化逻辑
      this.handleChange();
    }
  }

  updateInternalValue() {
    this.internalValue = '手动修改的值';
  }
}

这种方法适合那些无法用setter或RxJS覆盖的特殊场景，但一定要谨慎使用。

4. 表单输入的特殊处理 #

如果你的“依赖输入字段”是模板里的表单控件（比如ngModel或响应式表单），直接监听表单控件的valueChanges就好——Angular表单模块已经帮我们封装好了最便捷的监听逻辑：

import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-my-component',
  template: `<input [formControl]="myInput">`
})
export class MyComponent {
  myInput = new FormControl('');

  ngOnInit() {
    this.myInput.valueChanges.subscribe(value => {
      console.log('输入框值变化:', value);
      // 处理输入变化后的逻辑
    });
  }
}

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