angular - Angular 中继承组件的查询列表

Question

我有以下组件:基础组件 A。组件 B 和 C 继承自 A。

@Component({
  selector: 'A',
  template: `<div>A</div>`
})
export class A {}

@Component({
  selector: 'B',
  template: `<div>B</div>`
})
export class B extends A {}

@Component({
  selector: 'C',
  template: `<div>C</div>`
})
export class C extends A {}

还有一个组件类，其中包含所有 A、B 和 C 组件:

<A></A>
<B></B>
<C></C>

我的问题是如何获取所有 A、B 和 C 的查询列表？

我已经尝试过

@ViewChildren(A) components: QueryList<A>;

但它只给了我一个组件。

这里还有 plunkr这说明了这个问题。

提前谢谢您。

Answer 1

为了通过 @ViewChildren(A) 查询获取所有组件，您应该在每个派生组件上定义 A 提供程序:

@Component({
  selector: 'A',
  template: `<div>A</div>`
})
export class A {}

@Component({
  selector: 'B',
  template: `<div>B</div>`,
  providers: [{ provide: A, useExisting: B }]
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
})
export class B extends A {}

@Component({
  selector: 'C',
  template: `<div>C</div>`,
  providers: [{ provide: A, useExisting: C }]
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
})
export class C extends A {}

稍后在您的父组件中您应该编写如下内容:

@ViewChildren(A) components: QueryList<A>;

<强> Ng-run Example

另请参阅:

• What are all the valid selectors for ViewChild and ContentChild?