ViewChildren複数のコンポーネントを渡す

Question

@ViewChildren内で複数のコンポーネントを渡すことができないのはなぜですか？私はfiltersを反復処理し、viewChildren内のすべてのコンポーネントのapplyFilter()メソッドを呼び出しています、ある時点で

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

：

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

両方のコンポーネントが私のFilterインタフェースを実装しています：

は現在、これを持っています。私はシンプルなログを行うとき

しかし：

は

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