Angular 2 中的服务应该包含数据操作逻辑还是组件？答案

【问题标题】：Should services in Angular 2 hold the data manipulation logic or the components?Angular 2 中的服务应该包含数据操作逻辑还是组件？
【发布时间】：2023-03-11 08:36:02
【问题描述】：

这可以标记为基于意见。但我正在寻找标准/最佳实践。我正在构建一个 Angular 2 应用程序，我必须先处理来自 API 的数据，然后才能在模板中显示它。例如，如果我的服务看起来像：

getData(id: number): Observable<Data> {
    return this.http
      .get(this.url + '/' + id)
      .map((res) => {
        return res.json().data;
       });
  }

  prepareData(data) {
    // manipulate and return the data
  }

在我的组件上，我可以这样调用服务：

getData(id: number): void {
    this.dataService.getData(id)
      .subscribe((data: Data) => {
        this.showData = this.dataService.prepareData(data)
      };
  }

但这是标准方法吗？还是应该将 prepareData 函数包含在组件中？

另一种说法是，与组件相比，服务应该重还是轻并且仅充当获取数据的接口？

【问题讨论】：

标签： javascript angular angular2-services

【解决方案1】：

简单、通用的转换每个人都需要（例如res => res.json().data）应该在服务中。

依赖于表示逻辑的特定于视图的转换（例如data => data.user.firstName + ' ' + data.user.lastName）应该放在您的组件中。

服务应该能够提供数据而不知道将呈现什么。组件应该能够呈现数据而不知道它来自哪里。

【讨论】：

您的最后一行实际上有助于确定应该去哪里。我希望 Angular 文档能更清楚一点。

【解决方案2】：

从 n 层架构的角度考虑您的 Angular 应用程序。尊重 DRY 原则和至少一些 SOLID 点——在这种情况下，你的服务中的 S。将“组件”视为视图-呈现器对（模型在其他地方），而不是 ASP.NET 的 webForms（标记加上后面的代码）。

有两种基本的可能性会影响您的设计细节 - 您的服务服务器端点是否知道您的视图模型。一些团队采用这种方法，在您的 Angular 应用程序中几乎不需要转换，因为服务器端模型非常接近 Angular 视图模型。在这些情况下，任何不是特定于视图的东西都可以在您的服务中使用，而特定于视图的转换可以在组件中使用。

另一方面，如果您需要将更通用的服务/服务器响应映射到您的角度视图模型中，您不希望在服务中执行此操作。如果有可能在其他视图中重用此模型（将其视为业务类，而不仅仅是 DTO），您也不想在组件中执行此操作。由于映射可能涉及业务规则，因此最好在 Angular 应用程序中隔离专用模型和映射器层，并保持服务和组件 DRY 和“S”。创建一个单独的模型/业务层也很好，因为它实际上可以帮助您以后轻松地替换 UI 框架。

【讨论】：

你能告诉我更多关于 VM/mapper 层的信息吗？一些指向角度文档或示例的链接会很好。
这不是特定于角度的，而是受 OOP 启发的概念，可以在更大的应用程序中得到回报（因为您会将业务逻辑集中并分离为“真正的”类）。 This is one 明确提及该方法的文章。这是模型工厂 [(swimlane/angular-model-factory)] (github.com/swimlane/angular-model-factory) 的一个很好的实现，这是一个很好的开箱即用解决方案，如果需要，可以插入自定义类/映射器的扩展点跨度>

【解决方案3】：

您可以操作并返回getData() 中的数据。您可以编写如下代码-

getData(id: number): Observable<Data> {
    return this.http
      .get(this.url + '/' + id)
      .map((res) => {
          let data=  res.json().data;
          return this.prepareData(data);
       });
  }

  prepareData(data) {
    // manipulate and return the data
  }

如果您有具体的情况可以简要描述一下，我希望这会对您有所帮助，我会为您提供帮助。

【讨论】：