Angular 6 дочерний компонент изменяет родительский ввод, даже если это не двусторонняя привязка

Question

Это источник действительно неприятной ошибки, которую я обнаружил в своем коде.

Итак, у меня есть дочерний компонент:

chilidComponent {
    @Input("current-value") currentValue: Array<{id: string, name: string}>
}

и родительский компонент использует дочерний компонент, подобный этому

<child-component [current-value]="parentList"></child-component>

теперь, если дочерний компонент делает что-то вроде

this.currentValue.push({id: "someId", name: "someName"})

родительский компонент изменил свой "parentList", даже если нет явной двусторонней привязки.

Я знаю, что объекты (например, Array) передаются по ссылке, НО это законный / требуемый способ для Angular обрабатывать ввод компонентов?

Какова лучшая практика для передачи объектов в качестве входных данных? Как я могу передать и возразить против компонента, который я не хочу, чтобы он был изменен, даже если это происходит внутри компонента?

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

Должен ли я начать изучать Immutable.js на Facebook?

Answer 1

Массивы и объекты являются ссылками в JS. Таким образом, даже если вы передадите Array или Object вниз дочернему компоненту и назначите его локальной переменной, он все равно будет указывать на тот же ссылочный объект. Таким образом, его обновление обновит ссылку в родительском компоненте.

Клонировать объект без ссылки javascript

По сути, если вы не хотите ссылаться на объект, вы можете сделать это

var duplicateObject = JSON.parse(JSON.stringify( originalObject ));

Для массива

var newArray = oldArray.slice();