每个（组）组件单独的角度服务实例

Question

域名注册地址：

我如何将 Angular (6) 服务的一个实例用于一组（实例）组件（和指令），并将另一个实例用于另一组相同组件。

或提供更多信息：

我目前正在为基于 Angular 6 的应用程序中的表添加排序功能。因为我使用的是自定义样式（基于实体化），所以大多数库都不适合我。我发现了这个很好的例子，虽然它完全独立于所使用的样式。

它创建了一个SortableColumnComponent被添加到每个<th>标题和一个SortableTableDirective被添加到<table>元素的。他们通过一个SortService基本上只提供一个 RxJS 主题的 a 进行通信，以便在排序方向/属性发生变化时通知其他列。

这里的问题是，只要一次只显示一个可排序的表格，这个方法就很好用。但是，一旦添加更多，一次只能对一个应用排序（因为它们都共享相同的服务）。

根据angular docs，当您仅将服务注入应用程序根目录时（我这样做），它会自动成为单例。因此，我尝试仅将其注入 sortableColumn：

@Component ({
    selector: '[sortable-column]',
    templateUrl: './sortable-column.component.html'
    providers: [SortService]
})

但随后每一列似乎都有自己的服务版本，并且可以同时进行排序（这显然无法按预期工作）。

所以总体问题是：如何将一个角度服务的一个实例分配给一个（a 的实例）组件 (the SortableTableDirective)，并将匹配的 SortableColumnComponent组件和同一服务的另一个实例分配给其他表。

为了更清楚地说明这一点，这就是我想要实现的目标：

-------------------------------------------------------------------------
| page                                                                  |
|                                                                       |
| table 1 - SortableTableDirective - using instance 1 of sortingservice |
|   th 1 - sortablecolumncomponent - using instance 1 of sortingservice |
|   th 2 - sortablecolumncomponent - using instance 1 of sortingservice |
| ....                                                                  |
| table 2 - SortableTableDirective - using instance 2 of sortingservice |
|   th 1 - sortablecolumncomponent - using instance 2 of sortingservice |
|   th 2 - sortablecolumncomponent - using instance 2 of sortingservice |
-------------------------------------------------------------------------

或者有没有办法将某些列组件直接绑定到 table 指令并删除服务？似乎有一个我在这里缺少的“链接”概念。

Answer 1

阅读更多内容后，我发现angular 文档的另一部分（最后一段）终于让我走上了正轨：您可以通过将提供者范围加载到组件中来限制它。然后它只对组件及其子组件可用（！）。在这种情况下正是我需要的。

当我第一次尝试时，我犯了在列中加载服务的错误，从而为每个服务提供了不同的实例。将它加载到 table 指令中效果很好，因为这为 table 和所有子元素（例如列）提供了一个实例。table 指令的另一个实例然后加载该服务的另一个实例，它允许我对所有表进行相互独立的排序。

代码：

@Directive({
  selector: '[sortable-table]',
  providers: [SortService]
})