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

Question

我正在寻找一种将一个组件与多项服务结合使用的良好做法。

我有一个侧面导航菜单，里面有 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 是使用路由器和侧面导航菜单导航到的。参数是使用 activatedRoute 提取的)

2) 获取非常基本的用户输入

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

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

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

我正在考虑

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

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

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

干杯。

Answer 1

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

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

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

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

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

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