Ich habe 3 Komponenten. 1 übergeordnete Komponente, die eine der 2 untergeordneten Komponenten innerhalb eines ng-Inhalts umbrechen kann. Meine untergeordneten Komponenten verfügen über gemeinsam genutzte Funktionen, sodass sie eine abstrakte Klasse mit der gemeinsamen Funktionalität erweitern.Angular ContentKinder der erweiterten Klasse
Wenn ich versuche, ContentChildren zu verwenden, um die ng-Inhaltsreferenz zu erhalten, funktioniert es gut, wenn ich eine der untergeordneten Klassen verwende. Wenn ich auf die abstrakte Klasse referenziere, funktioniert sie nicht. Gibt es eine Möglichkeit, dies zum Funktionieren zu bringen? plkr ist: http://plnkr.co/edit/f3vc2t2gjtOrusfeesHa?p=preview
Hier ist mein Code:
Kinder abstrakte Klasse:
abstract export class Child{
value: any;
abstract setValue();
}
Meine Eltern Code:
@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();
}
}
Erstes Kind:
@Component({
selector: 'child1',
template: `
<div>
value is: {{value}}
</div>
`,
})
export class Child1 extends Child {
name:string;
constructor() {
}
setValue() {this.value = 'Value from child 1'}
}
Zweite Kind :
@Component({
selector: 'child2',
template: `
<div>
value is: {{value}}
</div>
`,
})
export class Child2 extends Child {
name:string;
constructor() {
}
setValue() {this.value = 'Value from child 2'}
}