每个(组)组件单独的角度服务实例 [英] Seperate instances of an angular service per (set of) component(s)

问题描述

TLDR:

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

How do I use one instance of an Angular (6) service for one set of (instances of) components (and directives) and another one for another set of the same components.

或提供更多信息:

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

I am currently working on adding a sorting feature to tables in my Angular 6 based application. Because I am using custom styles (materialize based) most libraries aren't working for me. I found this great example though which is totally independent of the styles used.

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

It creates a SortableColumnComponent that gets added to each <th> header and a SortableTableDirective that gets added to the <table> element. They communicate via a SortService that basically just provides a RxJS subject to notify other columns when the sorting direction/attribute changes.

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

The problem here is that this works great as long as only one sortable table is shown at a time. Once you add more though, sorting can only be applied to one at a time (as they all share the same service).

根据 angular docs，当您仅将服务注入到应用程序根目录(我做了).因此，我尝试仅将其注入 sortableColumn:

According to the angular docs a service becomes a singleton automatically when you inject it only into the application root (which I did). So instead I tried to inject it only into the sortableColumn:

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

但是每列似乎都有自己的服务版本并且可以同时排序(这显然不能按预期工作).

but then each column seems to get its own version of the service and can be sorted at the same time (which obviously does not work as intended).

所以总体问题是:如何将一个角度服务的一个实例分配给一个(一个)组件(SortableTableDirective)和匹配的 SortableColumnComponent 组件以及对其他表的相同服务的另一个实例.

So the overall question is: how can I assign one instance of an angular service to one (instance of a) component (the SortableTableDirective) and the matching SortableColumnComponent components and another instance of that same service to other tables.

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

To maybe make this clearer, this is what I am trying to achieve:

-------------------------------------------------------------------------
| 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 指令并删除该服务?似乎有一个我在这里缺少的链接"概念.

Or is there a way to bind certain column components to the table directive directly and just remove the service? There seems to be this one concept of "linking" that I am missing here.

推荐答案

阅读更多内容后，我发现了另一个部分angular docs(最后一段)终于让我走上了正轨:你可以通过在组件中加载它来限制提供者范围.然后它只对组件及其子组件可用(！).在这种情况下正是我需要的.

After reading some more I found another part of the angular docs (last paragraph) that finally got me on the right track: you can limit the provider scope by loading it in a component. Then its available only to the component and its children (!). Exactly what I need in this case.

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

When I first tried it I made the mistake of loading the service in the column and thereby providing a different instance to each one. Loading it in the table directive works great as this provides one instance to the table and all child elements (e.g. the columns). Another instance of the table directive then loads another instance of the service which allows me to sort all tables independently from each other.

代码:

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

这篇关于每个(组)组件单独的角度服务实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！