Совместное использование данных с @Input и @Output в компонентах Angular

Question

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

Что если мы хотим поделиться даннымис родительским компонентом без нажатия какой-либо кнопки, как в случае @Input?А что если компоненты никак не связаны?

Answer 1

Зачем нам нужно событие?

Потому что это предотвращает циклическую ссылку.Если родитель имеет ссылку на ребенка, а ребенок имеет ссылку на родителя, это будет циклическая ссылка.Это также увеличивает сложность вашего кода.Если я пишу компонент «кнопка», мне не нужно беспокоиться о том, какой компонент удерживает мой компонент кнопки.

Что если мы хотим обмениваться данными с родительским компонентом безщелкнув любую кнопку, как в случае @Input?

Вы можете запустить событие программно.Например, у вас может быть компонент таймера, который использует наблюдаемый RxJS interval для запуска события каждые 5 секунд.

interval(5000).subscribe(() => myOutput.next());

Что если компоненты не связаны каким-либо образом?

Затем они должны общаться через общую службу, не используя Input и Output.

Answer 2

Для первой части вашего вопроса я бы хотел уточнить:

Я не могу понять, почему вам нужно событие для обмена данными от потомка к родителю (@Output), в то время как @Input () отлично работает для родителя к потомку.

Поскольку Angular имеет однонаправленную систему обнаружения изменений, сверху вниз.

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

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

Однако, например, переназначение свойства @input в дочернем элементе не приведет к обновлению ссылки в родительском элементе, поскольку это нарушит вышеупомянутый дизайн сверху вниз.

Хотя для выходов имеется декоратор , обнаружение изменений снизу вверх не происходит, поэтому об изменениях в этом направлении необходимо явно сообщить родителю, например, с событиями, которые точно что происходит.

Дальнейшее примечание

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

Однако этот код трудно понять и отладить, тогда как @output декларативен и понятен.