我最近开始使用角度2进行一个新项目，并且对于下面的最佳方法有什么困惑 .
我有一个父组件（ROOT），它有3个子组件，A（表格格式的搜索结果项列表），B（谷歌 Map ）和C（具有多个输入/选择下拉列表的表单） .
组件C（精炼形式）应该是位于我注入ROOT父组件的服务中的API endpoints 所使用的搜索标准参数的主要驱动因素 . 返回的对象（当前是来自http调用的可观察对象）将用于提供所有3个子组件，呈现列表，映射等 .
现在，我真正无法理解的是：
1）如何从精炼搜索组件中的输入/选择中获取数据？我应该为每个字段实现输出吗？或者根父级是否应该使用viewChild以某种方式监听对它们的更改？
2）我应该订阅父节点中的observable服务，然后将它传递给列表并映射组件吗？
任何帮助或建议将不胜感激，这是一个很多东西要学习我仍然试图让我的头围绕这一切，不知道我是否以正确的方式接近它：/
2 回答
我用来设计这样的组件集合的方法是有一个智能和愚蠢组件的非正式概念，并根据以下标准决定每个组件是否应该是 .
一个愚蠢的组件对它周围的世界一无所知，如果它注入了依赖关系，它们都是无状态和同步的 . 除了将DOM事件传递给其中一个输出之外，哑组件永远不会使用异步 .
智能组件意识到它周围的世界 . 它可以访问有状态的服务，并负责它的愚蠢孩子的输入和输出 . 除了将哑巴儿童放置在容器内之外，智能组件不应该关注显示或用户输入 .
然后，这提供了一种定义组件通信方式的简洁方法 .
两个哑的组件应该彼此通信， unless 一个是另一个的直接祖先 . 它应该把所有孩子视为愚蠢的成分 .
智能组件通过他们的
@Input和他们的@Output与愚蠢的孩子互动 .两个智能组件通过注入服务相互通信（以及外部世界） .
根据您对组件“A，B和C”的描述，以下是我对它们进行分类的方法
答：搜索结果列表 .
绝对是一个愚蠢的组成部分 . 它应该有
@Input()用于接受结果列表，但该组件与实际搜索结果无关，它只显示它们 .B：谷歌 Map
另一个愚蠢的组件，它只是作为
@Input选项显示在 Map 上并显示 Map . 它可以基于用户与 Map 的交互而具有@Output，但它仅涉及显示数据 .C：表格
是的，你猜对了，另一个愚蠢的组成部分 . 它有一个输入，它是当前模型，以及当用户单击保存按钮时的输出 . 它不需要知道用户输入了什么，它只需要提供输入输入的能力（以及输入不正确时的验证） .
D：根组件
在这个简单的例子中，智能组件 . 它不关心显示数据或接受用户输入，它负责协调列表，输入和 Map 之间的交互 .
它应该从表单中获取数据，操纵api并在结果容器中显示结果，从
@angular/common开始自由使用AsyncPipe，这样结果， Map 或表单都不必相互了解 .我建议使用
Input将数据传递到子组件，直到第一级[first level child only]和Output，以向父级的父级发送事件到中级父级 .您可以通过不同的方式与组件进行交互 . 您可以在component communication guide.找到所有内容但是我建议您使用Parent and children communicate via a service，这样您就不需要在组件上定义更多输入和输出 .
您可以检查https://gist.github.com/ranakrunal9/7b26ccafbe29fcf4bdac4f9236e71e6a 3以获取父级和子级通过服务进行通信 .