[英]QueryList of inherited components in Angular
i have the following components: Base component A. Components B and C are inherited from A. 我有以下组件:基本组件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 {}
And there is a component class which contains all of the A, B and C components: 还有一个包含所有A,B和C组件的组件类:
<A></A>
<B></B>
<C></C>
My question is how can i get the querylist of all A, B and C ? 我的问题是如何获得所有A,B和C的查询 ?
I've tried 我试过了
@ViewChildren(A) components: QueryList<A>;
but it gives me only A
component. 但它只给了我
A
组件。
Here's also plunkr that demonstrates the issue. 这里也是一个证明这个问题的plunkr 。
Thank you in advance. 先感谢您。
In order to get all components throught @ViewChildren(A)
query you should define A
provider on each of your derived components: 为了通过
@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 {}
Later in your parent component you should write something like: 稍后在您的父组件中,您应该写如下:
@ViewChildren(A) components: QueryList<A>;
See also: 也可以看看:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.