角度2组件通信混淆

Question

我最近开始对新项目使用角度2，并且对于接下来的最佳方法避免了一些混淆。我有一个父组件（ROOT），它有3个子组件，A（表格格式的搜索结果项目列表），B（谷歌地图）和C（具有多个输入/选择下拉列表的表单），父组件。

组件C（精简形式）应该是位于我已注入到ROOT父组件中的服务中的API端点所使用的搜索标准参数的主要驱动程序。返回的对象（目前从HTTP调用可观察到的）将被用于养活所有3个组件，渲染列表，地图等

现在，我真的不能让我的头周围就是：

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

2）我是否应该订阅父级中的服务可观察项，然后将它传递给列表和映射组件？

任何帮助或建议将不胜感激，那里有很多的地狱来学习我还在试图让我的头周围一切，不知道如果IM甚至在以正确的方式接近它：/

Answer 1

我将建议使用Input将数据传递给子组件直到第一级[first level child only]和Output将事件发送给父母父母的父亲父母。

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

您可以检查https://gist.github.com/ranakrunal9/7b26ccafbe29fcf4bdac4f9236e71e6a3父母和孩子通过服务进行通信。

Answer 2

我用它来设计这样的组件集合的方法是有一个智能一个非正式的概念和哑组件，并决定每个组件是否应该基于以下标准。

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

然后，这给出了定义组件通信方式的简洁方法。

• 两个愚蠢的组件应该从未相互沟通，除非一个是另一个的直接祖先。它应该把所有的孩子当作愚蠢的组件来对待。
• 智能组件通过它们的@Input和@Output与哑孩子交互。
• 两个智能组件通过注入服务相互通信（和外部世界）。

根据您的组件的描述 'A，B和C'，这里就是我想将它们分类

答：搜索结果列表。

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

B：谷歌地图

另一哑元件，它只是需要为@Input的选项来显示在地图上并显示在地图上。根据用户与地图的交互，它可以有@Output，但它只关心显示数据。

C：形式

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

D：根组件

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

它应该从表单中获取数据，操作api并在结果容器中显示结果，从@angular/common开始自由使用AsyncPipe，这样结果，地图或表单都不需要知道任何关于对方的任何信息。