Question

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

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

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

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

1）从网址中获取“类型”和“ childUrl”字段（使用路由器和侧面导航菜单导航至该网址。使用activatedRoute提取参数）

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

3）拨打服务电话以发送已接受的输入。 决定使用服务取决于从参数接收的“类型”和“ childUrl”字段。

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

如果继续进行下去，当前的系统可能会起作用，但是我认为应该有一种更好的方法来处理此问题。向该服务注入8种服务，并且必须决定每次单击提交按钮时要使用哪种服务，都不是最好的选择。

我正在考虑

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

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

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

干杯。

Answer 1

共同行为诱发共同组成部分。

在Angular中，您按组成而不是扩展进行编码：您为类实现了几个接口（OnInit，AfterViewInit，CanActivate等），定义了它们的行为，而不是用其他类扩展您的类。

如果我有8条路由，它们执行相同的操作，但调用了不同的端点，我会：

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

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

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

Answer 2

我将使这两件事更加独立。侧面导航项无需了解任何ResponsesEditComponent服务。它可以具有自己的服务，例如ActivatedRoute。在ActivatedRoute中，您可以处理导航菜单的状态。通过该服务，您可以订阅任何“突出显示此事件”的事件。并且该服务可以通过注入ResponseEdit服务来发出这些事件。

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

所以是的，将路由分成8个并没有那么糟糕，但是替代方法是简单地为不同的形式使用不同的组件。可能通过这种方式可以避免重复，但是会增加有状态的管理组件的开销。

在一个组件中使用多种服务的最佳做法

2 个答案: