Angular HTML 选择器中的服务接口

Question

如何通过 HTML 选择器提供依赖注入？以下答案是通过打字稿。

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

我想在父 html 中做类似的事情，并使用 Male/Female 员工搜索服务。父组件有这个 html.

<app-search-component>
</app-search-component>

我看能不能通过Module来完成？但是，此模块在 html 中多次调用搜索组件，并且可能需要男性或女性员工搜索服务。

Answer 1

一般来说，依赖注入是一个静态过程，如果你想保持静态，你可以有两个组件<app-search-female-component>和<app-search-male-component>，声明如下

// <app-search-female-component>
constructor(
    private searchService:SearchInFemaleEmployeeService
) {}

// <app-search-male-component>
constructor(
    private searchService:SearchInMaleEmployeeService
) {}

或者使用一个参数声明一个搜索组件，该参数给出您要使用的服务类型

// <app-search-component type="male">
@Input()
public type: string;
constructor(
    private maleSearchService:SearchInFemaleEmployeeService,
    private femaleSearchService:SearchInMaleEmployeeService,
) {}

有很多方法可以实现您想要的。我更喜欢第二个，因为我们将服务的选择定位在组件内部。我的意思是，在某些时候，您将不得不以编程方式和动态地告诉您要选择哪种搜索类型，如果它被隔离在某个地方就好了。开关越少越好:)

编辑：我知道您将在这里有 20-30 项服务，因此您不想在搜索组件中注入这 20-30 项服务。然后你可以创建一个服务SelectorService用来select要使用的搜索服务。 这样做，20-30 项服务的注入仅完成一次，在 SelectorService 中，您的组件仅注入一项服务。

// SelectorService
constructor(
    private maleSearchService:SearchInFemaleEmployeeService,
    private femaleSearchService:SearchInMaleEmployeeService,
    ...
) {}

selectSearchService(type: string): ISearchService {
    switch (type) {
    ....
    }
}

// <app-search-component type="male">
@Input()
public type: string;
constructor(
    private selector:SelectorService,
) {}

Angular HTML 选择器中的服务接口

Angular Interface for Service in HTML Selector

typescript

angular

angular10