Reactive Forms兼容组件及其自己的数据源

Question

我有一个组件DropdownBase，这是一个基于下拉列表的con 选择和选项，它实现了 ControlValueAccessor 以实现兼容与反应形式。

组件实现尝试对输入数据进行通用，它具有下一个输入：

• optionList：any []
• labelKey：string
• valueKey：string

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

在此之前一切正常（如果你有更好的想法，请告诉我），但现在让我说我的下拉列表有一个非常具体的案例，让我们称之为{{1} }。此实现使用服务来获取国家/地区。

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

CountriesDropdown

对于每个下拉列表都有自己的服务（数据源）的情况，容器组件是否应该进行所有服务注入？或者，如果<form [formGroup]="form"> <input .../> <dropdown-base ...></dropdown-base> <dropdown-base ...></dropdown-base> <dropdown-base ...></dropdown-base> <base-form> 的示例，我应该使用国家/地区服务调用和CountriesDropdown的实例化来创建容器组件吗？ （如果是这样，我如何处理容器组件的 formControlName ）

感谢。

Answer 1

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

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

然后在父组件中，我定义了getCustomersTypeAhead：

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

在子组件中，我将HttpFn定义为Input（）：

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

到目前为止，这是可行的。