angular – ViewChildren传递多个组件

发布时间：2020-12-17 17:50:58 所属栏目：安全来源：网络整理

导读：为什么我不能在@ViewChildren中传递多个组件？目前有这个： @ViewChildren(ColorFilterComponent,TransmissionFilterComponent) public filters: QueryListFilter; 两个组件都实现了我的Filter接口： export declare abstract class Filter { abstract appl

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

目前有这个：

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

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

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

在某个时刻,我正在迭代过滤器并为viewChildren中的所有组件调用applyFilter()方法.

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

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

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

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

解决方法

这仅受模板变量支持

@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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!