Question

TLDR：

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

或提供更多信息：

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

它将创建一个SortableColumnComponent和一个<th>，该SortableTableDirective被添加到每个<table>标头中，并且被添加到SortService元素中。它们通过@Component ({ selector: '[sortable-column]', templateUrl: './sortable-column.component.html' providers : [SortService] })进行通信，该{基本上仅提供一个RxJS主题，以便在排序方向/属性发生更改时通知其他列。

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

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

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 | -------------------------------------------------------------------------组件以及该组件的另一个实例服务到其他表。

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

myArray.sort((a, b) => mySort(a, b, true));

还是有一种方法可以将某些列组件直接绑定到table指令，而只需删除服务？我似乎在这里缺少“链接”这一概念。

Answer 1

您不应在组件中提供服务，而应在AppModule中提供服务，并通过在构造函数中创建属性来“注入”服务。

service.ts

@Injectable({
  providedIn: 'root'
})

export  class MyService {
}

编辑：

component.ts

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

myService: MyService = new MyService();

constructor() {}

appModule.ts

@NgModule({
declarations:[component], 
imports: [YourModules], 
providers: [MyService],
bootstrap: [component]
})
export class AppModule {}

Answer 2

阅读更多内容后，我发现了另一个part of the angular docs（最后一段），终于使我步入正轨：您可以通过将提供程序范围加载到组件中来限制提供程序范围。然后，它仅可用于组件及其子项（！）。正是在这种情况下我需要的。

当我第一次尝试它时，我犯了一个错误，那就是将服务加载到列中，从而为每个列提供了不同的实例。将其加载到table指令中非常有效，因为它为表和所有子元素（例如列）提供了一个实例。然后，table指令的另一个实例加载服务的另一个实例，这使我可以对所有表进行独立的排序。

代码：

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

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

2 个答案: