ViewChildren传递多个组件

Question

为什么我不能在@ViewChildren中传递多个组件？

目前有这个：

 @ViewChildren(ColorFilterComponent, TransmissionFilterComponent)
 public filters: QueryList<Filter>;

这两个组件都实现了我的Filter接口：

export declare abstract class Filter {
    abstract applyFilter(vehicles: Vehicle): boolean;
}

在某个时候，我要遍历filters并调用applyFilter()viewChildren中所有组件的方法。

但是，当我做一个简单的日志时：

console.log(this.filters.toArray());

它仅包含一个过滤器。另一个不在这里。

在这种情况下，什么是最佳的最佳做法？

Answer 1

仅模板变量支持此功能

@ViewChildren('var1,var2,var3')

但不适用于组件或指令类型。

如果Filter是一个公共基类，您可以尝试以下方法：

providers: [{ 
  provide: Filter, 
  useExisting: [ColorFilterComponent, TransmissionFilterComponent],
  multi: true
}]

然后查询像

@ViewChildren(Filter) filters: QueryList<Filter>;

Answer 2

HTML：

 <colorfilter #filter></as-colorfilter>
 <transmissionfilter #filter></as-transmissionfilter>

零件：

@ViewChildren('filter')
public filters: QueryList<Filter>;