为了解释这一点,我首先必须对可能会改变您对应用程序设计的看法的组件进行一些考虑。
成分
组件是对既是整体的一部分又由另一个整体组成的事物的通用定义,但它没有具体说明每个组件在该整体中的作用。因此,在基于组件的体系结构中,通常定义指令来处理组件,从而可以更好地定义每个角色。
例如:一堆组件,一个由另一个组合而成,但所有组件;
<component>
<component></component>
<component>
<component></component>
<component></component>
</component>
</component>
智能组件和哑组件
我读过大多数基于组件的框架和库都使用这种方法。组件分为两类,智能组件和哑组件。这篇Tero Parviainen 的文章和Dan Abramov更好地描述了这一点。
例如:仍然,都是组件,但由其类别定义
<app>
<nav></nav>
<!-- projects-page is Dumb: I don't have to know nothing
<!-- just organize and display things -->
<projects-page>
<!-- project-list is Smart: I must know how to retrieve projects -->
<project-list>
<!-- Dumb: just display -->
<project-list-item></project-list-item>
<!-- Dumb: just display -->
<project-list-item></project-list-item>
</project-list>
</projects-page>
</app>
基本上,智能组件连接到应用程序逻辑,他们知道如何思考。尽管他们可能有输入和输出,但他们大多知道如何加载自己的数据,以及如何在发生更改时持久保存。但是Dumb组件只知道事物应该是什么样子,并且完全由它们的绑定定义:它们使用的所有数据都作为输入提供给它们,它们引入的每一个更改都作为输出,Toward Smart And Dumb Components,Tero Parviainen 的。
回答
所以你的问题的答案是:这取决于你如何看待那个子表单组件,如果它只是一个显示字段的编辑器(即,愚蠢,我认为在这种情况下它是)。或者负责由检索和命令与持久性单元的通信来保存它(即,智能)。
无论如何,最重要的是确保您从智能组件保存数据,最好是从该数据的所有者那里保存数据。将智能组件视为管理者,将愚蠢组件视为生产者。另外,查看这篇关于编写基于组件的应用程序的文章:使用Dima Grossman 编写的 Angular 1.5 编写基于组件的山羊约会应用程序。
注意:将智能组件视为有状态的。这基本上意味着智能组件在某些情况下的可重用性较低。如果您必须form-component
在另一个组件上重用该对象project
是另一个对象的一部分(例如,{ client: { name: '', projects: [{ id:1, ...} ...]
),并且您想使用相同的表单来编辑该对象内的项目,您将面临一个问题。你不能重用完全相同的组件逻辑,因此在这种情况下,一个哑组件对于重用可能更有用,因为它更简单、更客观,而且它不做任何决定,只是展示东西,接收和返回数据。