域名注册地址:
我如何将 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]
})
Run Code Online (Sandbox Code Playgroud)
但随后每一列似乎都有自己的服务版本,并且可以同时进行排序(这显然无法按预期工作)。
所以总体问题是:如何将一个角度服务的一个实例分配给一个(a 的实例)组件 (the SortableTableDirective),并将匹配的 SortableColumnComponent组件和同一服务的另一个实例分配给其他表。
为了更清楚地说明这一点,这就是我想要实现的目标:
-------------------------------------------------------------------------
| page |
| |
| table 1 - SortableTableDirective - using instance 1 of sortingservice |
| th 1 - sortablecolumncomponent - using instance 1 of sortingservice | …Run Code Online (Sandbox Code Playgroud)