Angular中如何检测由变量初始化的嵌套@Input属性的变更？

这个问题本质是两层逻辑叠加导致的：

• 对象属性计算是一次性的：父组件初始化filters对象时写的disabled: this.firstCondition || this.secondCondition，只会在对象创建的瞬间执行一次，把当时两个条件的运算结果存为固定值，后续两个条件变量变化时，没有任何代码会自动更新这个disabled属性的值，这是JS本身的运行逻辑，和Angular无关。
• @Input默认按引用比对：Angular默认对@Input的值做按引用相等校验，当你没有生成新的对象引用、也没有主动修改disabled的实际值时，传入子组件的内容没有任何变化，自然不会触发子组件的变更检测流程。

之前手动修改disabled能触发检测，本质是那次操作确实改变了disabled的实际值，刚好满足变更检测的触发条件。

• 方案1：基于不可变数据思路动态重建filters对象
  把filters的生成逻辑抽成独立方法，不要在初始化时写死逻辑：

  // 抽离生成方法，每次调用都会基于当前的条件值生成全新对象
  private buildFilters(): Filters {
    return {
      dropdowns: [
        {
          label: 'Direction',
          options: {
            disabled: this.firstCondition || this.secondCondition
          }
        }
      ]
    }
  }
  
  // 初始化时调用方法生成初始filters值
  filters: Filters = this.buildFilters();
  

  每当firstCondition或secondCondition发生变化时，重新给filters赋值全新的对象：

  // 示例：修改条件后同步更新filters
  this.firstCondition = true;
  this.filters = this.buildFilters();
  

  因为每次生成的是全新的对象引用，子组件的@Input值引用发生变化，会被变更检测捕获，同时disabled值会基于最新的条件重新计算，不会出现值不更新的问题。

• 方案2：条件变化时主动同步disabled属性值
  如果不想每次重建整个对象，也可以在两个条件变化的逻辑里，直接同步更新disabled属性的实际值：

  // 修改条件时同步更新disabled的实际值
  this.firstCondition = true;
  this.filters.dropdowns[0].options.disabled = this.firstCondition || this.secondCondition;
  

  这种方式能保证disabled属性的实际值和当前条件保持一致，在Angular默认的Zone.js变更检测体系下，只要是在Angular上下文里的属性修改，都能被正常检测到。

• 方案3：拆分@Input传入内容，把动态计算逻辑下放到子组件
  如果filters对象结构比较复杂，每次同步属性值的维护成本很高，也可以不再把提前计算好的disabled存在filters里，直接把两个原始的条件值通过@Input传给子组件，让子组件自己计算disabled状态：

  // 子组件新增两个输入，接收原始的条件值
  @Input() f: Filters;
  @Input() firstCondition: boolean;
  @Input() secondCondition: boolean;
  

  子组件模板绑定disabled时直接用原始值计算：

  <button [disabled]="firstCondition || secondCondition">Direction</button>
  

  这种方式完全去掉了父组件维护disabled同步逻辑的负担，只要两个条件的原始值变化，Angular就能直接检测到属性变化，不需要中间做对象拷贝或者属性同步。

注意：不要把对象字面量里的一次性运算当成动态绑定逻辑，JS本身不会跟踪对象属性的依赖变化，所有需要动态更新的值，都需要在依赖变化的时机主动重新计算或者重新赋值。

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