Angular 2 服务接口(interface)

Question

我想开发一个搜索组件。这是以下用例:

1. 此组件调用带有搜索条件参数的服务。
2. 服务调用 api 端点并将结果对象作为收藏。
3. 组件在模板中显示结果。

我只想编写一个能够根据情况调用不同服务的搜索组件。假设我有两个服务:

1. SearchInMaleEmployeeService
2. SearchInFemaleEmployeeService

这两个服务都实现了返回员工列表的搜索功能。我想根据情况告诉我的组件哪些服务。在 C# 中，我们可以使用接口(interface)来告诉组件构造函数使用哪个服务。

我如何在 Angular2 中做到这一点？

额外的问题:我如何根据服务返回的对象类型告诉我的组件使用哪个模板来呈现搜索结果？

Answer 1

您可以通过依赖注入(inject)来实现这一点。

如您所说，创建两个实现相同 ISearchService 接口(interface)的不同服务。

使用 SearchComponent 时，从模块到 ServiceComponent 提供适当的服务类。

你的 SearchComponent 看起来像

  constructor(private searchService: ISearchService) {}

并且在不同的地方使用SearchComponent时提供服务实例:

providers: [
  { provide: ISearchService, useValue: SearchInMaleEmployeeService}
]

或

providers: [
  { provide: ISearchService, useValue: SearchInFemaleEmployeeService}
]

有关 Angular2 依赖项注入(inject)的更多信息 here .

更新:

正如本所指出的

Provide语句需要编码为

provide('ISearchService', {useClass: SearchInMaleEmployeeService})

并将类注入(inject)组件:

constructor(@Inject('ISearchService') private searchService:ISearchService) {}