Angular监听@Input()属性变化时ngOnChanges不生效问题求助

• 核心错误是ngOnChanges钩子的SimpleChanges对象的键名对应子组件自身定义的@Input属性名，而非父组件传递时绑定的父组件变量名。你子组件的输入属性名为selectedValue，但代码中尝试读取changes.professionalSituation，该属性在changes对象中不存在，因此逻辑无法正常触发。
• 额外排查点：需要确认你已经从@angular/core导入了SimpleChanges类型，且ngOnChanges方法是OnChanges接口的实现，子组件类要显式实现OnChanges接口。

方案1：修正ngOnChanges的取值键名 #

直接把读取的键改为子组件的输入属性名selectedValue即可，适合需要同时监听多个输入属性变化的场景：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'ftn-popin-opener',
  template: `<label>{{ selectedValue }}</label>`
})
// 必须实现OnChanges接口
export class FtnPopinOpenerComponent implements OnChanges {
  @Input() selectedValue: string;

  ngOnChanges(changes: SimpleChanges): void {
    // 键名改为组件自身的@Input属性名selectedValue
    if (changes.selectedValue) {
      // 不需要过滤首次赋值的话可以去掉firstChange判断
      if (!changes.selectedValue.firstChange) {
        console.log(changes.selectedValue.currentValue);
        // 此处写入需要触发的业务逻辑
      }
    }
  }
}

方案2：使用@Input setter监听变化 #

如果只需要监听selectedValue单个输入属性的变化，用setter写法更简洁，不需要引入OnChanges钩子：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'ftn-popin-opener',
  template: `<label>{{ selectedValue }}</label>`
})
export class FtnPopinOpenerComponent {
  private _selectedValue: string;

  @Input()
  set selectedValue(value: string) {
    this._selectedValue = value;
    // 赋值完成后直接触发对应逻辑
    console.log(this._selectedValue);
  }

  get selectedValue(): string {
    return this._selectedValue;
  }
}

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