Angular 2 Component通信混乱

Question

我最近开始在一个新项目中使用角度2，并且对于下面的最佳方法有什么困惑。

我有一个父组件（ROOT），它有3个子组件，A（表格格式的搜索结果项列表），B（谷歌地图）和C（具有多个输入/选择下拉列表的表单）。

组件C（精炼形式）应该是位于我注入ROOT父组件的服务中的API端点使用的搜索条件参数的主要驱动程序。返回的对象（当前是来自http调用的可观察对象）将用于提供所有3个子组件，渲染列表，映射等。

现在，我真正无法理解的是：

1）如何从精炼搜索组件中的输入/选择中获取数据？我应该为每个字段实现输出吗？或者根父级是否应该使用viewChild以某种方式监听对它们的更改？

2）我应该订阅父级中的服务observable，然后将其传递给列表并映射组件吗？

任何帮助或建议都会非常感激，我还有很多需要学习的东西，我仍然试图全面了解并且不确定我是否以正确的方式接近它：/

Answer 1

我用来设计这样的组件集合的方法是使用 smart 和 dumb 组件的非正式概念，并决定每个组件是否应该基于根据以下标准。

1. 一个愚蠢的组件对它周围的世界一无所知，如果它注入了依赖关系，它们都是无状态和同步的。除了将DOM事件传递给其中一个输出外，哑组件永远不会使用异步。
2. 智能组件了解周围的世界。它可以访问有状态的服务，并负责它的愚蠢孩子的输入和输出。 除了在容器中定位愚蠢的孩子之外，智能组件不应该关注显示或用户输入。

然后，这提供了一种定义组件如何通信的简洁方法。

• 两个愚蠢的组件应该从不彼此沟通，除非一个是另一个的直接祖先。它应该把所有孩子视为愚蠢的成分。
• 智能组件通过@Input及其@Output s与愚蠢的孩子互动。
• 两个智能组件通过注入服务相互通信（和外部世界）。

根据您对组件“A，B和C”的描述，以下是我如何对它们进行分类

答：搜索结果列表。

绝对是一个愚蠢的组成部分。它应该有一个@Input()来接受结果列表，但该组件与实际搜索结果无关，只是显示它们。

B：谷歌地图

另一个愚蠢的组件，它只需要@Input选项显示在地图上并显示地图。根据用户与地图的互动，它可以@Output，但它只关注显示数据。

C：表格

是的，你猜对了，另一个愚蠢的组成部分。它有一个输入，它是当前模型，以及当用户单击保存按钮时的输出。它不需要知道用户输入了什么，它只需要提供输入输入的能力（以及输入不正确时的验证）。

D：根组件

智能组件，在这个简单的例子中。它不关心显示数据或接受用户输入，它负责协调列表，输入和地图之间的交互。

它应该从表单中获取数据，操纵api并在结果容器中显示结果，从AsyncPipe开始自由使用@angular/common，这样结果，地图或表单都没有了解彼此的任何事情。

Answer 2

我建议使用Input将数据传递给子组件，直至第一级[first level child only]和Output，以便将事件发送到imediate父级而不是父级的父级。

您可以通过不同的方式与组件进行交互。您可以在component communication guide.找到所有内容但我建议您使用Parent and children communicate via a service，这样您就不需要在组件上定义更多输入和输出。

您可以查看https://gist.github.com/ranakrunal9/7b26ccafbe29fcf4bdac4f9236e71e6a 3以获取家长和孩子通过服务进行通信。