Angular v4：我们将数据存储在服务或组件中还是两者兼而有之？答案

【问题标题】：Angular v4: Do we store data in a Service or the Component or both?Angular v4：我们将数据存储在服务或组件中还是两者兼而有之？
【发布时间】：2018-01-25 03:56:30
【问题描述】：

Angular v4：我们是将数据存储在服务还是组件中，还是两者兼而有之？

在查看了很多教程，以及阅读了 Angular 的文档之后，我仍然不清楚这个主题。

https://angular.io/tutorial/toh-pt2Angular 的教程清楚地展示了存储在组件中的数据。

https://angular.io/guide/architecture#services Angular 的体系结构 > 服务部分显示了包含数据数组的服务的代码（这是正确的吗？）。

如果我们在组件中存储数据，我们会大量使用@Input 和@Output 在子组件之间移动数据（假设我们希望这些数据在前端），但是这会带来一个问题我们使用路由，我们需要从路由器出口加载的新组件来对我们的服务进行新的调用，以承诺对我们的服务器进行 API 调用以保存数据。在这种情况下，我们可能会有 2 个组件保存相同的数据 - 但它们可能不匹配。

如果我们将数据存储在服务中，我们将大量使用我们的服务来检索数据，并操作数据（假设我们希望在前端使用这些数据），这样我们的服务就拥有一组数据，每个组件都可以随时调用服务数据来获取一致的数据。

存储数据的正确方法是什么？是否不建议使用其他之一？

【问题讨论】：

标签： javascript angular angular-services

【解决方案1】：

一般来说，如果许多组件使用相同的数据，您希望将数据存储在服务中。这样，就可以非常轻松地从应用程序的所有不同部分访问相同的数据。如果一个组件修改了服务中的数据，那么所有使用该数据的组件都会修改它，这通常很有帮助。但是，如果您只需要将数据从一个组件发送到另一个组件（其中一个组件是另一个组件的父级），则有时没有必要。在这种情况下，建议使用输入/输出。

如果您不需要在各个组件之间发送特定的数据，那么将数据存储在一个组件中是完全可以接受的！请记住，除非您使用输入/输出，否则无法从其他组件访问它。

【讨论】：

"如果你不需要在各个组件之间发送具体的数据，那么将数据存储在一个组件中是完全可以接受的！"不符合官方风格指南。
您仍然将数据存储在服务中吗？我是通过 Udemy 课程学习的
Angular 架构的官方指南指出You define a component's application logic—what it does to support the view—inside a class. The class interacts with the view through an API of properties and methods.，这意味着控制器是用来操作组件中的 UI，它应该只通过服务或输入知道其数据。
这是很好的信息，谢谢你们。文档，更具体地说是关于 Angular 的教程并没有清楚地表明这一点。因此数据可以整天存储在服务中，并且从服务中检索并添加到组件中的数据只有在数据特定于该组件的视图时才有效。
为什么会有一个只能处理一组数据的组件？这似乎违反直觉，组件是用来重复使用的。

【解决方案2】：

您知道@Output 与EventEmitter 权限相关，因此数据通过绑定到事件在组件之间共享。服务是您通常执行诸如 Http 请求之类的事情的地方 - 类似于 RESTFUL api 之类的事情。它也可以是本地存储、网络连接，或者在应用程序运行时作为存储状态的存储桶。组件通常与视图相关联并使用影子 DOM

【讨论】：

【解决方案3】：

组件控制器应该只管理该特定组件的 UI 交互。

另一方面，服务管理组件之间的交互、数据映射、没有直接关系（父>子、兄弟等）的组件之间的事件处理。

这背后的想法是，服务一旦被创建，它就会留在作用域内并且不会被破坏。另一方面，组件在销毁后从 DOM 中删除。话虽如此，如果您使用您的组件来执行例如 API 调用来收集数据，则每次在框架的生命周期中初始化组件时都会执行此 API 调用，而如前所述，服务将持续存在。

服务的持久性还允许我们使用诸如 observables 之类的东西，以始终保持前端和后端之间的直接联系。

希望这会有所帮助。

编辑

请记住，Angular.io 教程分为多个部分，以帮助在用户遵循教程时对框架进行完整介绍。

【讨论】：

【解决方案4】：

如果多个组件共享数据，请尽可能将其放入服务中。我说尽可能，因为通过让服务管理数据，您现在必须担心过时的数据。我的 goto 数据存储位置在组件中，但是您必须小心这样做，因为您不希望导致站点必须一直重新获取数据。

就我个人而言，我的大多数组件都管理自己的数据，以避免出现过时数据问题。

如果您对此不担心，您甚至可以使用缓存服务，而不是将数据存储在 ram 中，而是将其存储在本地存储或会话存储中，以确保网站不会变慢通过将大量数据放入计算机 Ram 中。

虽然我不是这方面的权威专家，但这只是我的意见。

【讨论】：

如果您在组件中管理数据，您使用服务做什么？
服务专门用于对数据执行 GET/POST/PUT 操作，组件调用服务获取数据，然后将其存储在组件中。我犹豫是否将所有内容都存储在服务中，因为组件如何不复制该数据，以便视图可以使用它？另外，我的天哪，我可以评论我自己的帖子！！天啊，不能发表评论真是痛苦。写完之后，我想我其实是在使用服务来“保存”我的数据，我只是不在服务中缓存我的数据……而组件使用服务来获取所需的数据。
我也想在服务中缓存数据，最终……我只需要四处寻找时间在某个时候实际执行此操作。
angular.io/guide/… 这就是您使用服务的原因。
我喜欢那篇文章中的所有“为什么？”。让文章阅读要求更高。