Угловое 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. Если вы передадите строку как param (или любое примитивное значение), ваша функция получит копию этой строки, и любая модификация не повлияет на исходную переменную вне функции, только ее копия.

Это то, что мы ожидаем, что во многих языках, но и для других типов (непримитивного), функция не получает копию Пар, он на самом деле получает ссылку на исходный объект и любой модификацию внутри функции будет изменен исходный объект.

Я думаю, что это причина вашей проблемы.

Чтобы решить эту проблему, вы можете создать копию массива. Один из способов сделать это - сериализовать/unserialize ваш массив в/из JSON:

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