Распространяются ли изменения в полях Input (() на родительский компонент?

Question

Насколько я понимаю, я могу передавать данные дочерним компонентам с помощью директивы @Input () и отправлять данные обратно родительскому компоненту с помощью @Output () и с соответствующим излучением. Но я не знал, что данные об изменениях в поле @Input () будут отправлены родителю. Это правильно?

Я изменил книгу связи компонентов, чтобы воспроизвести это https://input-params.stackblitz.io

Вы можете объяснить?

Спасибо,

Answer 1

Да, вы можете передать данные дочернему компоненту с помощью @Input (). Это привязка ссылки, поэтому, когда вы изменяете значение в дочернем элементе, это также отражается в родительском компоненте.

Используя @Output (), вы можете отправлять любые данные из дочернего компонента в родительский. Но поскольку переданные данные привязаны к ссылкам, значение изменяется в родительском элементе, даже если вы не передаете его обратно с помощью @Output ().

Но если вы хотите изменить значение только в дочернем компоненте и не получить измененное значение в родительском компоненте, вы можете сделать еще одну копию своего массива и передать ее дочернему компоненту с помощью @Input ().

Вы можете сделать копию исходного массива, используя:

let inputArray = _.cloneDeep(this.originalArray)

_ - это библиотека loda sh, предоставляющая множество таких опций.

Чтобы использовать loda sh, вы должны добавить следующую строку в импорте:

import * as _ from 'lodash';

Answer 2

Входные данные являются обычными переменными, если вы передаете объект входу angular передает его указатель, поэтому родительский и дочерний компоненты указывают на одни и те же данные, и если вы изменяете внутренние части этих данных в родительском или дочернем компоненте он будет соблюдаться в обоих местах, но если вы переназначаете само свойство - оно не имеет эффекта от дочернего компонента, потому что он изменяет дочерний указатель, и в следующем цикле обнаружения изменений он будет возвращен к родительскому значению из-за несовпадения значений .

Если вы передаете примитив на вход (логическое число строки), он не разделяет указатель, и эффект не применим.