Angular-应用程序组件架构

Question

我目前正在Angular 7.*中尝试设计应用程序组件。没有做很多工作，我发现设计干净的组件体系结构很困难。

我们称它为MainComponent会收到JSON输入，例如

{
   "name": "name",
   "description": "description",
   "attributes": [ // Rectangle in the image
      {
         "attr1": "value", // Editable
         "attr2": "value", // Editable
         "attr3": "value"  // Editable
      },
      {
         "attr1": "value", // Editable
         "attr2": "value", // Editable
         "attr3": "value"  // Editable
      },
      ...
   ]
}

重要字段是attributes。它的每个元素都将显示为一个单独的区域，我希望将其编码为一个新组件。

每个attributes元素在主元素内变成一个矩形。
并且attribute的每个字段都是可编辑的，因此必须构造一个FormGroup。

但是，保存是全局的，而不是每个子组件。
而且我需要“监听”在每个组件中修改了哪些值。

我考虑过两种解决方案。

1. 在主级别具有FormGroup，具有多个子FormGroup，每个子组件一个。每个子FormGroup都输入到子Component内部。保存时，我只看主要的FormGroup，它已经包含每个更改的值。

2. 每个子组件都拥有一个单独的FormGroup。保存时，主要组件 asks （称为方法）的每个子组件都可以检索修改后的值。

哪种解决方案最适合Angular？你会怎么做？

编辑：我要问的是将JSON输入分配到多个子组件的更好的方法是什么，请注意在保存时检索已编辑的值，即上层/主要层。