angular10 - 从子组件角度更新父数据

Question

是的，这个老栗子。

我正在为一个大型对象树制作一个编辑器，并且在树中的一个顶点为每个属性类型制作组件似乎是明智的，以便从主要组件中消除混乱。但是，这造成了主 JSON 对象没有被更新的问题，因为编辑器是在子组件 ( @Input) 中实现的。

使用@OutputandEventEmitter似乎不可行，因为：

• 你到底是如何让一个组件在它正在编辑的数据发生更改时调用发射器的，以及
• 必须编写一个更新函数来处理事件似乎真的很愚蠢，因为 UI 应该只是自动绑定到它正在编辑的 JSON 对象——这就是这个可观察到的问题的重点。

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

有没有更好的办法？

标签： angular10

Answer 1

你描述的方式很标准。另一种方法是使用模板#变量来访问您的子属性。

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

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

@ViewChild('childcomponent') childcomponent;

堆栈闪电战