父组件中的数组不能从angular2中的子组件分配答案

【问题标题】：Array in parent component cannot be assigned from a child component in angular2父组件中的数组不能从angular2中的子组件分配
【发布时间】：2016-05-19 17:11:22
【问题描述】：

这可能是一个简单的解释，所以请原谅我的无知。

当使用来自子组件的数组并在传递的值上使用.pop()、.splice()、.push() 时，它会很好地保留父数组值，但是当我尝试分配值时（=）它不会将数组持久化在父组件中。

我创建了一个simple example on Plunker。

该程序有 3 个按钮，清除、弹出和重新加载。

清除列表 - 将 @Input list 分配给一个空数组 (this.list = [])。注意父组件计数器没有改变

Pop - 在列表中执行.pop()。请注意，父组件计数器发生了变化。

为什么我不能简单地分配数组值？

我知道可以使用EventEmitter 并让家长收听事件并以这种方式更新。我试图理解这一点场景，看看我是否可以避免额外的代码。

【问题讨论】：

说list 指向内存0x123。 pop 方法更改内存地址 0x123 上的数组，因此，更改反映在父级和子级中。 clear 方法将子组件的list 属性分配给0x321，父组件的list 属性指向0x123，该内存地址没有发生变化。
解决方案。 this.list.length = 0; 但是，您应该明白让两个小部件操作相同的数据会使您的逻辑难以遵循。这就是为什么有像 redux 这样的框架，所以数据可以以一种方式流动，而另一种方式的更新以一致的、可调试的方式发生。一种中间方法是从子小部件发出和事件，并让父小部件响应该事件并更新列表
非常感谢小伙伴们的解释

标签： javascript arrays angularjs angular

【解决方案1】：

父和子都引用同一个/一个数组对象。因此，如果您更改数组的元素（例如，修改数组元素，或添加或删除元素），父和子都会“看到”更改，因为更改发生在同一个/一个对象上。

如果您在父级中分配一个新数组，Angular 更改检测会将新数组引用向下传播到子级，因为这是子级的输入属性。

但是，如果您在子级中分配一个新数组，则父级仍然会引用原始数组。角度变化检测在这里对您没有帮助。您必须将这个新数组告知父级，例如，使用 EventEmitter。

【讨论】：