Angular 反应式表单兼容组件及其自己的数据源

我有一个组件

DropdownBase

，它是一个基于下拉菜单的con-select和选项，它实现了ControlValueAccessor，以便与被动表单兼容

组件实现试图对输入数据进行泛型，它具有以下输入：

• 选项列表：任意[]
• 标签键：字符串
• valueKey:string

因此，为了创建选项，我将迭代optionList，并使用labelKey和valueKey获取标签和值

在这之前一切都很好（如果你有更好的想法，请告诉我），但是现在让我们假设我有一个非常具体的下拉列表，我们称之为

CountriesDropdown

。此实现使用服务获取国家/地区

下面是真正的问题所在，假设下一个组件层次结构：

<form [formGroup]="form">
  <input .../>
  <dropdown-base ...></dropdown-base>
  <dropdown-base ...></dropdown-base>
  <dropdown-base ...></dropdown-base>
<base-form>

对于每个下拉菜单都有自己的服务（数据源）的情况，容器组件是否应该有所有的服务注入？或者，如果以

CountriesDropdown

为例，我应该使用countries服务调用和

DropdownBase

的实例化创建一个容器组件吗？（如果是，如何处理容器组件的formControlName）

---

谢谢。

我做了类似的事情，但是选择了向组件传递方法引用以进行服务调用

<generic-type-ahead
    formControlName="customer"
    placeholder="Customer"
    [httpFn]="getCustomersTypeAhead">
</generic-type-ahead>

在子组件中，我将HttpFn定义为输入（）

@Input（）httpFn:（s:string）=>可观察；

到目前为止，这是可行的

getCustomersTypeAhead = (s: string) => this.customerClient.getCustomerPickList(s);

  @Input() httpFn: (s: string) => Observable<any[]>;