Angular 2 组件之间的单向绑定答案

【问题标题】：Angular 2 One Way Binding Between ComponentsAngular 2 组件之间的单向绑定
【发布时间】：2017-07-04 20:24:28
【问题描述】：

我想知道为什么，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 中学习和做一些教程...

【问题讨论】：

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：