传递多个组件的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

HTML：

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

组件：

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

Answer 2

这仅适用于模板变量

@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