Angular中继承组件的QueryList

时间:2018-03-12 11:25:53

标签: angular

我有以下组件:基本组件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>;

但它只给我A组件。

此处还有plunkr来说明问题。

提前谢谢。

1 个答案:

答案 0 :(得分:7)

为了通过@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

另见: