从子组件角度更新父数据

问题描述

是的，这个老栗子。

我正在为大型对象树创建编辑器，为了从主要组件中消除混乱，在树的顶点处为每种属性类型创建组件似乎很明智。但是，这造成了一个问题，即由于在子组件（@Input中实现了该编辑器，因此无法更新主JSON对象。

使用@Output和EventEmitter似乎不可行，因为：

• 实际上，当正在编辑的数据发生更改时，您如何获得一个组件来调用发射器？
• 不得不编写一个更新函数来处理事件似乎真的很愚蠢，因为UI应该只是自动绑定到它正在编辑的JSON对象上-这就是这个可观察到的malarkey的 point 。 / li>

我能想到的唯一解决方案是不使用组件，而只编写大型的整体编辑器。

有更好的方法吗？

解决方法

您描述的方式非常标准。不过，另一种选择是使用模板#变量来访问您的子属性。

<hello #childcomponent name="{{ name }}"></hello>
<div>
  {{ childcomponent.name }} - Parent component
</div>

您也可以使用它通过打字稿来访问子组件。

@ViewChild('childcomponent') childcomponent;

Stackblitz