每个(组)组件的角度服务的单独实例 [英] 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的应用程序中的表添加排序功能.因为我使用的是自定义样式(基于实例化)，所以大多数库都不适合我.我发现了这个很好的例子，尽管这完全是与所使用的样式无关.

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 (添加到每个< th> 标头)和一个 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).

根据角度 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指令的另一个实例将加载服务的另一个实例，这使我可以将所有表彼此独立地排序.

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屋！