Angular 哪一个是保持逻辑的最佳位置？

我正在处理一个角度应用程序。比如说，当我们实现像onclick某个按钮这样的特性时，调用api，处理数据，在表中显示结果。表数据应该跨页面保留（因此我们需要将变量保留在服务中）

对于实现，首先我们可以从模板开始调用函数，然后在组件中我们可以进行一些检查，并调用一个服务来获取数据。一旦我们得到数据，如果我们想要处理数据，在这种情况下，处理数据的函数应该在组件或服务中

我们可以在服务文件中写入逻辑吗？或者它应该在组件文件中？最好的做法是什么

方法1：

 getApi() {
    this.http
      .get(url)
      .subscribe(response=> {
          this.afterFetchingProcessData(response); // this might be some function in service file
      },error=>{
          // handle error
      });
  }

  afterFetchingProcessData(response){
       //process the data and assign to variable 
       this.tabledata = response;
  }

或者我们应该遵循下面的模式

方法2： 在组件文件中：

 getApi() {
      this.service.getApi().subscribe(response=> {
          this.afterFetchingProcessData(response); // this might be some function in service file
      },error=>{
          // handle error
      });
  }

  afterFetchingProcessData(response){
       //process the data and assign to variable 
       this.service.tabledata = response;
  }

在服务文件中，只需调用Api并返回响应

 getApi() {
    return this.http
      .get(url);
  }

遵循方法1或方法2的最佳实践是什么？为什么？

是一个涵盖应用程序需要的任何价值、功能或功能的广泛类别。服务通常是一个具有狭义的、定义良好的用途的类。它应该做一些具体的事情，把它做好

Angular将组件与服务区分开来，以提高模块化和可重用性。通过将组件的视图相关功能与其他类型的处理分离，可以使组件类变得精简高效

理想情况下，组件的工作是实现用户体验，仅此而已。组件应该提供数据绑定的属性和方法，以便在视图（由模板呈现）和应用程序逻辑（通常包括模型的一些概念）之间进行调解

组件可以将某些任务委托给服务，例如从服务器获取数据、验证用户输入或直接登录到控制台。通过在可注入服务类中定义此类处理任务，可以使这些任务对任何组件都可用。您还可以在不同的情况下适当地为同一类服务注入不同的提供商，从而使您的应用程序更具适应性

Angular不执行这些原则。Angular确实帮助您遵循这些原则，使您可以轻松地将应用程序逻辑考虑到服务中，并通过依赖项注入将这些服务提供给组件

控制一块称为视图的屏幕。例如，各个零部件定义并控制教程中的以下每个视图：

应用程序根目录包含导航链接。 英雄名单。 英雄编辑。 您可以定义组件的应用程序逻辑，以支持类内的视图。该类通过属性和方法的API与视图交互

在doc上检查架构

---

方法2是更好的选择

在我看来-

• 组件-构成表示层，应重点向用户表示并从用户处获取输入
• 服务-做所有其他事情

我将进一步将服务分为：

• 副作用服务-负责API调用等
• 主要服务-封装应用程序的行为

---

对于原型和简单或短期应用程序之外的任何东西，除了最简单的业务逻辑之外的任何东西都应该提取到基于类的服务或其他依赖项中。至少，组件应分为表示组件和容器组件或类似模式

我会引用我自己的文章

简而言之，倾斜的有角部件 对于寿命较短的简单应用程序或项目，混合组件是可以接受的，因为对代码库的可维护性、可伸缩性甚至可测试性没有太大的需求

对于大型、复杂的应用程序，我们更需要最大化刚才提到的有价值的特性。要做到这一点，我们需要只包含属于表示性水平应用程序层的逻辑的表示性组件。这些组件应该只在一个抽象级别处理一个问题

精益呈现组件只关心向用户呈现信息，并允许他们与应用程序交互。实现细节留给属于不同水平应用程序层的其他软件构件。演示或用户交互的复杂逻辑被委托给组件级服务，如演示者

我们也可以有精益容器组件。它们将应用程序状态投影到表示组件，并将特定于应用程序的事件转换为影响应用程序状态的命令。复杂的逻辑被委托给组件级服务，例如facade，甚至可能是特定于组件的服务

正如本文中所讨论的，使组件模型精简对应于Angular style指南中的几个建议

那么共享状态应该住在哪里呢？以下是一些选项：

• 具有RxJS主题的基于类的服务
• 组件树中较高位置的页面/容器组件
• 状态管理框架/库中的状态容器或其他选项，如NgRx、Akita、NGXS、可观察的Redux、角度Redux、MobX或NGXF

---

遵循no2，使其结构良好 简单方法：在Html中调用方法->在ts中声明该方法->为Api调用创建一个服务，您可以在其中调用所有Api->rest执行该ts中的逻辑 为常见的一些可重用方法提供服务，在这些方法中，您只需传递所需的参数。

---

就这些

您应该在

组件

文件中应用主逻辑，

服务

文件最好只用于进行

api

调用。这背后有什么原因吗？假设我们从api中得到错误，我们需要在ui上显示错误消息。。我们在哪里