在一个组件中使用多个服务的最佳实践答案

【问题标题】：Best practice about using multiple services in one component在一个组件中使用多个服务的最佳实践
【发布时间】：2019-05-19 16:50:48
【问题描述】：

我正在寻找一种关于将一个组件用于多个服务的良好做法。

我有一个包含 7-8 个项目的侧导航菜单。单击它们应该会打开一个组件来编辑一个简单的表单，并将更新的数据发送到与所选导航项对应的服务。

// responses-routing..
const responsesRoutes: Routes = [
  {
    path: 'responses',
    component: ResponsesComponent,
    children: [
      {
        path: '',
        component: ResponsesHomeComponent
      },
      {
        path: ':type/:childUrl',                <----- here
        component: ResponsesEditComponent
      }
    ]
  }
];

我目前正在使用一个组件（ResponsesEditComponent）来

1) 从 url 中获取“type”和“childUrl”字段（此 url 使用路由器和侧导航菜单导航到。参数使用 activateRoute 提取）

2) 接受非常基本的用户输入

3) 进行服务调用以发送获取的输入。 使用服务的决定取决于从参数接收到的“type”和“childUrl”字段。

7-8 个菜单项有时会有子项，这些子项也将使用属于其父菜单项的服务。

如果我继续使用当前系统，它可能会工作，但我觉得应该有更好的方法来处理这个问题。向服务注入 8 个服务，并且必须在每次提交按钮单击时决定使用哪个服务，这并不是最好的方法。

我正在考虑

将一条路线分成8条路线
使用 8 个组件而不是 1 个组件，每个组件对应一个菜单项
为每个组件注入 1 个对应的服务

但这似乎只是重复的工作。

您介意解释一下您将如何处理这种情况，或者指出一个我可能不熟悉的相关概念吗？

干杯。

【问题讨论】：

我会使用 ngFor 进行迭代的 menu-component 使用其自定义配置动态生成的 menu-item-component 列表。这样，您只需将一项服务导入menu-item-component，并且代码清晰。此外，如果此菜单仅“可见”几次，则应延迟加载 menuComponent#Module

标签： angular angular6 frontend angular-routing angular7

【解决方案1】：

共同的行为导致共同的成分。

在 Angular 中，您通过组合而不是扩展进行编码：您为您的类实现多个接口（OnInit、AfterViewInit、CanActivate 等），定义它们的行为，而不是使用其他类扩展您的类。

如果我有 8 条路线，它们做同样的事情但调用不同的端点，我会：

制作 1 个组件
进行 1 次服务
使用解析器覆盖每个路由的 API URL

如果这 8 条路线的行为略有不同，我会

进行 1 次服务
制作 1 个组件
使用组件工厂解析器创建行为略有不同的组件

【讨论】：

【解决方案2】：

我会让这两件事更加独立。侧导航项不需要了解任何 ResponsesEditComponent 服务。它可以拥有自己的服务，例如，ActivatedRoute。从ActivatedRoute，您可以处理导航菜单的状态。通过该服务，您可以订阅任何“突出显示这个或那个”事件。该服务可以通过注入您的 ResponseEdit 服务来发出这些事件。

而且 ResponseEditComponent 也应该只有一个包装服务。测试起来很容易，几乎是微不足道的。向组件发送一个给定的 :type 和 :childUrl（请给它们更多描述性的名称）。绘制合适的表格（也许你可以为不同的表格设置不同的子组件，进一步分离图层）。根据给定的类型加载表单数据（如果有）。当表单（或嵌套组件）发出更改时，例如保存事件，使用简单（类型、childUrl、emitedData）调用服务。该服务应该能够确定将保存重定向到哪个子服务。

是的，将路线分成 8 条路线并没有那么糟糕，但另一种方法是简单地为不同的形式使用不同的组件。这样您可能会避免一些重复，但会增加有状态的管理组件的开销。

【讨论】：