[英]Angular ContentChildren of extended class
我有3个组件。 1个父组件,可以包含ng-content中任意2个子组件之一。 我的子组件具有共享功能,因此它们扩展了具有共享功能的抽象类。
当我尝试使用ContentChildren获取ng-content引用时,如果我使用其中一个子类,它可以正常工作。 当我引用抽象类时,它不起作用。 有没有办法让这项工作? plkr是: http ://plnkr.co/edit/f3vc2t2gjtOrusfeesHa?p =preview
这是我的代码:
儿童抽象课:
abstract export class Child{
value: any;
abstract setValue();
}
我的父代码:
@Component({
selector: 'parent',
template: `
<div>
parent
<ng-content></ng-content>
</div>
`,
})
export class Parent {
@ContentChild(Child)
child: Child;
name:string;
constructor() {
}
ngAfterViewInit() {
this.child.setValue();
}
}
第一个孩子:
@Component({
selector: 'child1',
template: `
<div>
value is: {{value}}
</div>
`,
})
export class Child1 extends Child {
name:string;
constructor() {
}
setValue() {this.value = 'Value from child 1'}
}
第二个孩子:
@Component({
selector: 'child2',
template: `
<div>
value is: {{value}}
</div>
`,
})
export class Child2 extends Child {
name:string;
constructor() {
}
setValue() {this.value = 'Value from child 2'}
}
我通过使用以下方法解决了
进入我的Child1的Component装饰器
providers: [{provide: Child, useExisting: forwardRef(() => Child1)}],
进入我的Child2组件装饰器
providers: [{provide: Child, useExisting: forwardRef(() => Child2)}],
您现在可以从angular查看新的io示例:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.