组件中应该包含哪种逻辑代码？服务中应该使用哪种逻辑代码？

Question

在我看来，将一段代码放在Component或Service中并不重要。这是真的吗？

Answer 1

您在整个应用程序中可能需要多次使用的任何逻辑都应该作为服务编写。

在视图中如何以及何时使用这些服务的逻辑将在控制视图的组件中。

基于Angular Overview on application architecture，组件应该是精简的，并且只包含控制视图的逻辑。它不应该从服务器获取数据，也不应验证用户输入，而应该将任何此类任务委托给服务。

  

组件的工作就是启用用户体验，仅此而已。它介于视图（由模板呈现）和应用程序逻辑（通常包括模型的某些概念）之间。一个好的组件提供了数据绑定的属性和方法。它将所有重要的事务委托给服务。

另一方面，服务是一种特定的逻辑，可以在整个应用程序中多次重复使用。它有助于保持组件的精简，并使您的应用程序干燥。

  

服务是一个广泛的类别，包含您的应用程序所需的任何价值，功能或功能。

     

几乎任何东西都可以成为一种服务。服务通常是具有狭窄，明确定义目的的类。它应该做一些特定的事情，做得好。

Answer 2

我认为这相当于询问：服务在MVC模式的上下文中的作用是什么？在Angular2中，Model是Object模型，指定为组件类的成员变量，Controller是Component类，View是组件模板。

服务负责检索Controller渲染视图所需的模型。因此，服务与视图无关。

Controller（或组件类）负责从服务返回模型，并将其呈现给视图。对于Angular2，这意味着将Model保存为组件类的成员变量，以便可以在视图模板中呈现。

应用程序逻辑属于服务。这包括公开子订阅者可以订阅的事件。

组件控制器逻辑应包含订阅服务事件的逻辑，或调用服务方法以检索模型并将其呈现给视图（即将模型存储为组件类的成员变量）。

Answer 3

<强>组件：

• 应严格遵守向UI显示数据所需的逻辑

• DOM事件方法（点击，更改等）

• 更改UI状态的方法（例如：保持状态以显示/隐藏某些内容）

• 生命周期方法（ngInit，ngDestroy等）

<强>服务

• 应该注意如何请求/发送数据
• 应该公开组件接收/发送数据的简单方法 （组件应该只使用 service.getData（）之类的东西 不知道如何要求这样做）
• 应该有方法在需要时过滤组件的数据 （getUserById，getListByUser等......）
• 任何其他非严格UI相关的逻辑都可以传递给 服务（记录，认证等......）

Answer 4

服务是一种singleton，我无法解释它更简单。

简单示例：音频播放器

想象一下，你想在你的webapp上使用音频播放器，为了做到这一点，你将拥有一个特定的组件（例如在你的页脚中），包含所有动作，播放列表，当前声音等......但是你呢？我当然希望与其他组件进行交互：想象一下列出一些音频文件的组件，你需要在每个组件旁边放一个按钮，以便播放媒体或将其添加到当前播放列表中。

使用服务时，您只需要在服务中逐出所有操作/播放列表/ currentSound;它将成为音频播放器与需要与之交互的所有内容之间的链接：播放，暂停，停止，添加到播放列表等...

希望它会有所帮助。

Answer 5

实际上它会起作用，但是不好的做法，尤其是在共享逻辑时，应该从服务而不是模块组件中共享它（显然，它更清洁，并且可能具有更好的性能），因为有角度的文档说组件应该只提供视图。

Answer 6

认为服务可以在多个组件中重用。如果您发现自己在多个组件中编写代码，则可能需要一项服务。

此外，如果您必须执行http请求并且想要过滤信息或进行一些操作，最好将问题分开并将此逻辑移至适当的服务。您的组件不需要知道如何获取数据的详细信息。尝试尽可能多地从实现细节中抽象出组件。

希望它有所帮助！