相关疑难解决方法(0)

每个(组)组件单独的角度服务实例

域名注册地址:

我如何将 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)

angular-services angular

9
推荐指数
1
解决办法
5791
查看次数

标签 统计

angular ×1

angular-services ×1