角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

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

Answer 2

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

这正是我们所期望的许多语言，但对于其他类型（非原始），该功能没有得到帕拉姆的副本，它实际上得到一个参考原始对象的任何修改在函数内完成将改变原始对象。

我认为这是你的问题的原因。

要解决这个问题，您可以创建一个数组副本。一种方法是从JSON序列化/反序列化你的数组到/从JSON序列化：

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