ViewChildren传递多个组件

Question

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

目前有这个：

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

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

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

在某个时刻，我正在迭代filters并为viewChildren中的所有组件调用applyFilter()方法。

然而，当我做一个简单的日志时：

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>;

另见https://github.com/angular/angular/issues/8580#issuecomment-218331920

Answer 2

HTML：

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

组件：

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