我有以下组件:基本组件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来说明问题。
提前谢谢。
答案 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 强>
另见: