Angular 2组件之间的单向绑定

Question

我想知道为什么，Angular 2中的单向绑定只适用于字符串属性而不适用于字符串数组？

我有一个父组件和一个子组件...我传递字符串和字符串的集合，并在内部更改它们，并在子组件指令中修改字符串属性类型，而不是在父组件指令中（这是我的期望）但是，当我修改数组的第一个元素时，更改会反映在父模板和子模板中......

父组件

names : Array<string> = [...]
name : string = "App Works";

子组件

@Input("names") _names : Array<string>;
@Input("title") _name : string;

父组件模板

{{names | json}}
<app-person [names]="names" [title]="name">
  <p>Awesome !!!</p>
</app-person>

预期的行为是，如果我尝试在子组件指令中修改数组的第一个元素，则更改不会反映在父组件中，而是反映在子组件中。

我在PluralSight中学习和做一些教程......

Answer 1

Javascript有一种疯狂的handling function params方式。如果您将字符串作为参数传递（或任何原始值），则您的函数将获取此字符串的副本，并且任何修改都不会影响函数外部的原始变量，只有里面的副本。

这是我们在许多语言中的期望，但对于其他类型（非原始），该函数没有得到param的副本，它实际上获取引用到原始对象，在函数内部进行的任何修改都将改变原始对象。

我认为这是导致问题的原因。

要解决此问题，您可以创建数组的副本。一种方法是将数组序列化/反序列化为JSON：

function(myExternalArray) {
    let myLocalArray = JSON.parse(JSON.stringify(myExternalArray));
    // YOUR CODE HERE
}

Answer 2

这是预期的，因为您正在共享同一个实例。如果不想共享更改，则应该在子组件中克隆数组。