Angular：更新子组件中传递对象的属性会更新父组件，更新其值不会，为什么？

Question

Angular 中有一个我不太了解的行为。假设我有两个组件：父母和孩子。父组件将数据传递给子组件。

在子组件中：

• 当传递的对象的属性被更新时，对象在父组件和子组件中都会更新。
• 当对象值更新时，父组件不会更新。

---

不知道有没有说清楚，所以做了这个plunker：

http://next.plnkr.co/edit/PnlotZxt3DLbAGAF?open=lib%2Fapp.ts&deferRun=1&preview

点击“更新薪水”以更新员工对象的薪水属性。 点击“更新员工”以更新员工对象值。

有人可以解释一下这种行为吗？我虽然使用括号和 @Input() 仅用于单向数据绑定，但现在我很困惑。

谢谢！

Answer 1

Object 的引用问题。只要对象具有相同的引用，就可以检测到更改。

在您的情况下 - 您正在将新值分配给子组件中的 employee，这会破坏链。现在 Parent 指向不同的 employee 对象，而 child 指向不同的 employee。

简而言之，您始终需要确保您可以更改对象的属性，但不应该重新分配（引用更改）给其他对象。

在您的示例中，我修改了来自

的更改

this.employee = this.employee2;

到

Object.assign(this.employee,this.employee2);  // this will change the existing object.