ViewChildren 传递多个组件答案

【问题标题】：ViewChildren passing multiple componentsViewChildren 传递多个组件
【发布时间】：2016-09-07 19:22:19
【问题描述】：

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

目前有这个：

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

两个组件都实现了我的过滤器接口：

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

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

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

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

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

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

【问题讨论】：

标签： angular

【解决方案1】：

HTML：

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

组件：

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

【讨论】：

【解决方案2】：

这仅支持模板变量

@ViewChildren('var1,var2,var3')

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

如果Filter 是一个通用的基类，你可以试试这样的：

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

然后像这样查询

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

【讨论】：