如何在 Angular 4 中处理单个组件中的多个事件答案

【问题标题】：How to handle multiple events in the single component in Angular 4如何在 Angular 4 中处理单个组件中的多个事件
【发布时间】：2017-09-13 09:36:07
【问题描述】：

我正在使用 Angular 4 为应用程序开发 UI 层，其中我的页面布局如下所示。我必须根据搜索在相应的表中显示数据。

现在我有代码可以在一个 html(records-list.component.html) 中显示数据，该 html(records-list.component.html) 是一个组件 (records-list.component.ts) 的一部分。为了显示基于搜索的结果，我使用了搜索框的 onSelect($event) 事件。在这种情况下，我将有 两个 onSelect($event) 事件，1 个用于 search1，1 个用于 search2。

我的问题是，在组件类中处理事件的最佳方式是什么？
1. 在单个 onSelect(event) 方法中处理搜索框场景？
2. 我是否必须将代码拆分为 2 个组件（也是 2 个模板）？这样每个组件都会负责显示每个表的数据和事件？
3. 在组件中创建一个名为search($event, 's1') 的方法，并使用一些参数来区分2次搜索并根据参数更新表格？

这个问题可能很傻或太简单，但我无法决定选择哪种方式。请建议我你的想法。谢谢。

【问题讨论】：

您需要更深入地了解您要通过此实现的目标。您可能需要根据您的任务将它们（搜索框和结果表）全部拆分为另外 50 个小组件，但任务完全不清楚。
在左侧表格中，我将显示作业名称列表。用户将使用 search1 选项搜索特定工作并选择工作。选择工作后，我将在右侧显示与所选工作相关的信息。用户可以使用 search2 选项来过滤右侧的结果。

标签： jquery angular user-interface responsive-design

【解决方案1】：

我认为您对事件和组件之间的区别有点误解。所以有：

您发出事件的智能/哑组件的概念。通常的语法类似于<my-component (onLeftSelected)="performLeft($event)" (onLeftSelected)="performRight($event)"></my-component>。

在“我的组件”中，您发出事件并在父组件中定义处理程序。

！！但我可能会做的是将左右拆分为单独的组件，并在每个组件中声明相关方法，而不使用发射事件。

所以你会有一个带有(click)="doSomething(data)" 的左组件和一个带有(click)="doVeryImportantStuff(data)" 的右组件。

在这种情况下，代码将被解耦，您可以在需要时在其他部分重用任一端。

但正如@AlexanderLeonov 所写，您应该首先了解您希望如何拆分它。

【讨论】：

好的。感谢您的澄清。对如何继续进行一些了解。我可能需要检查更多事件。
@RajashreeGr 让我知道是否可以为您提供任何帮助。决定是否要在组件内部执行操作或将事件“向上”发送到下一个/父组件。
我决定使用多个组件将事件“向上”发送到下一个/父事件。感谢你的回答。它帮助我认识到我的误解。如果我再次卡住，我会回复你。
@RajashreeGr 太好了，在这种情况下，只需在父组件上定义两个方法并使用我在第 1 点上写的子组件。乐于提供帮助。
谢谢。我会尝试这种方法。