Angular父组件修改对象类型输入参数时子组件未检测到更新如何解决

Angular 默认的变更检测逻辑中，@Input() 只有在值的引用发生变化时才会触发 ngOnChanges 钩子：

• disabled 是布尔类型的基础值，每次修改都是赋新值，引用自然发生变化，所以可以正常触发检测
• config 是引用类型的对象，你直接修改它的内部属性时，对象本身的内存地址没有变化，Angular 就会认为输入值没有发生改变，自然不会触发 ngOnChanges

推荐按优先级选择以下方案：

• 方案1：修改配置时生成新的对象引用
  父组件修改配置属性时，通过展开运算符或者Object.assign生成一个全新的对象替换原有变量，触发变更检测，无需修改子组件代码：

changeConfig() {
    this.customConfig = {
        ...this.customConfig,
        value: 'name'
    };
    this.newDisabled = true;
}

该方案符合Angular单向数据流设计，性能最优，优先推荐。

• 方案2：子组件手动监听对象内部属性变化
  如果业务场景必须保留原有对象引用，可以在子组件中使用KeyValueDiffers手动检查对象内部属性的变化：

import { KeyValueDiffers, KeyValueDiffer, OnInit, DoCheck } from '@angular/core';

export class ChildComponent implements OnInit, DoCheck {
    @Input() config: MyConfig;
    @Input() disabled: boolean;
    private configDiffer: KeyValueDiffer<string, any>;

    constructor(private differs: KeyValueDiffers) {}

    ngOnInit() {
        // 初始化对象差异检测器
        this.configDiffer = this.differs.find(this.config).create();
    }

    ngDoCheck() {
        // 每次变更检测周期检查对象属性变化
        const configChanges = this.configDiffer.diff(this.config);
        if (configChanges) {
            console.log('config 发生变化', this.config);
            // 此处写入你的更新逻辑
        }
    }

    ngOnChanges() {
        console.log('disabled', this.disabled);
    }
}

注意该方案会在每个变更检测周期执行检查，性能消耗高于方案1，非必要不推荐使用。

• 方案3：拆分配置为单独的基础类型输入参数
  如果配置项数量不多，可以把config的每个属性拆成独立的@Input()参数，基础类型的修改都可以正常触发ngOnChanges。

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