Angular 2接口用于服务

Question

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

1. 此组件使用搜索的术语参数调用服务.
2. 该服务调用api端点并将结果对象作为集合返回.
3. 组件在模板中显示结果.

我想只编写一个能够根据具体情况调用不同服务的搜索组件.想象一下,我有两个服务:

1. SearchInMaleEmployeeService
2. SearchInFemaleEmployeeService

这两种服务都实现了返回员工列表的搜索功能.我想根据具体情况告诉我的组件哪个服务.在C#中,我们可以使用interface告诉组件构造函数使用哪个服务.

我怎么能在Angular2中做到这一点？

额外问题:如何根据服务返回的对象类型向我的组件说出用于呈现搜索结果的模板？

Answer 1

您可以通过依赖注入实现此目的.

正如您所说,创建两个实现相同ISearchService接口的不同服务.

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

你SearchComponent会看起来像

  constructor(private searchService: ISearchService) {}

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

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

要么

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

约Angular2依赖注入更多的信息在这里.

更新:

正如本指出的那样

提供语句需要编码为

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

并将类注入组件:

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