Angular中如何干净检测输入对象的深层属性变化？

方案1：控制器Getter属性（兼容全Angular版本，无额外依赖） #

这是最符合需求的原生方案，和模板直接绑定属性的变更检测逻辑完全一致，无需依赖任何可观察对象：

1. 在子组件控制器中把计算逻辑写到Getter里：

@Input() form: any;

get difficultyColor(): string {
  if (!this.form) return 'black';
  if (!this.form.difficulty) return 'brown';
  const diffVal = this.form.difficulty.value;
  if (diffVal === 'easy') return 'green';
  if (diffVal === 'hard') return 'red';
  return 'orange';
}

2. 模板直接绑定Getter即可：

<div [class]="difficultyColor"></div>

说明 #

Angular变更检测触发时，会对模板绑定的所有表达式求值，Getter的执行时机和直接写在模板里的长三元表达式完全一致，对象内部属性更新后会自动重新计算取值，没有额外适配成本，同时逻辑收敛到控制器中，可读性大幅提升。
额外补充：Getter的执行频率和模板直接写表达式完全相同，不存在额外性能损耗，只是逻辑位置迁移，符合不修改父组件、不依赖valueChanges的要求。

方案2：Signals计算属性（Angular 16+，性能更优） #

如果使用Angular 16及以上版本，用Signals的计算属性可以实现更高性能的缓存求值，只有依赖的属性实际发生变更时才会重新运行计算逻辑：

1. 把输入属性转为Signal，定义计算属性：

// Angular 17+ 输入Signal写法
form = input<any>();

// Angular 16 写法
// private formSignal = signal<any>(undefined);
// @Input() set form(v: any) { this.formSignal.set(v); }

difficultyColor = computed(() => {
  const form = this.form(); // 16版本写this.formSignal()
  if (!form) return 'black';
  if (!form.difficulty) return 'brown';
  const diffVal = form.difficulty.value;
  if (diffVal === 'easy') return 'green';
  if (diffVal === 'hard') return 'red';
  return 'orange';
})

2. 模板绑定计算属性：

<div [class]="difficultyColor()"></div>

说明 #

computed计算属性自带缓存，只有依赖的信号值更新时才会重新计算，变更检测周期直接读取缓存结果，性能优于Getter方案，同样不需要依赖表单的valueChanges可观察对象。

常见误区澄清 #

模板中调用方法会触发频繁执行的前提是方法无缓存、每次调用都执行完整逻辑，但Getter和直接写在模板里的表达式执行逻辑完全等价，不会产生额外开销，是Angular原生支持的逻辑提取方案。

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