我正在寻找关于将一个组件与多个服务一起使用的良好实践。

我有一个侧面导航菜单,其中包含 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 个菜单项在某个时候会有子项,这些子项也将使用属于其父菜单项的服务。

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

我正在考虑
  • 将一条路由分成 8 条路由
  • 使用 8 个组件而不是 1 个,每个组件对应一个菜单项
  • 为每个组件注入(inject) 1 个对应的服务

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

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

    干杯。

    最佳答案

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

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

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

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

  • 如果这 8 条路线的行为略有不同,我会
  • 制作 1 个服务
  • 制作 1 个组件
  • 使用组件工厂解析器创建行为略有不同的组件
  • 关于angular - 在一个组件中使用多个服务的最佳实践,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53847106/

    10-12 03:56
    查看更多