为什么Angular父组件中@Input绑定的属性值未发生变更？

问题原因 #

Angular 默认的 @Input 变更检测只会监听引用地址的变化：

• 你直接修改 this.object 的属性，对象本身的引用没有发生变化，变更检测不会触发视图更新
• 你用到的 Object.assign(this.object, {...this.object}) 是把属性合并到原对象上，返回的仍然是原对象的引用，同样不会触发变更检测
• 如果你直接在子组件给 this.object 赋值新对象，只会修改子组件内部变量的指向，不会影响父组件持有的原对象引用，父组件自然不会响应

解决方案 #

方案1（推荐：符合单向数据流规范） #

通过子组件 Output 事件通知父组件更新对象，从根源避免数据流混乱：

1. 子组件新增 Output 事件

@Output() objectChange = new EventEmitter<ObjectLayer>();

2. 需要更新对象时，生成新对象抛给父组件

// 拷贝原对象并更新属性，生成新的引用
const updatedObj = {...this.object, id: 100};
this.objectChange.emit(updatedObj);

3. 父组件绑定事件接收更新

<your-child [object]="parentObject" (objectChange)="parentObject = $event"></your-child>

父组件更新自身持有的对象引用后，变更检测会自动触发所有关联视图的刷新。

方案2（不推荐：仅适用于临时场景） #

如果确实需要直接修改原对象属性，可手动触发变更检测：
在需要更新的组件中注入 ChangeDetectorRef，修改属性后调用 markForCheck() 标记需要刷新：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

// 修改属性后调用
this.object.id = 100;
this.cdr.markForCheck();

该方案违反单向数据流原则，后续对象变更链路复杂后容易出现不可预测的视图更新问题，不建议长期使用。

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