angular - ViewChildren 传递多个组件

Question

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

目前有这个:

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

两个组件都实现了我的 Filter 接口(interface):

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

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

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

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

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

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

Answer 1

HTML:

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

组件:

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