Ich erstelle eine Angular2-Anwendung in Typescript und möchte die von Typescript angebotene Klassensystemfunktionalität (read: class inheritance) verwenden. Es scheint jedoch, dass Angular2 mit abgeleiteten Klassen nicht gut spielt. Ich bin auf der Suche nach Hilfe, um meine Bewerbung zum Laufen zu bringen.

Das Problem, dem ich gegenüberstehe, ist, dass ich eine Basisklasse habe und von dort ein paar Kinderklassen ableiten kann. Wenn ich meinen Komponentenbaum aufbaue, möchte ich in der Lage sein, auf die Eltern / Kinder der Komponenten zuzugreifen (so oder so ist es in Ordnung). Soweit ich weiß, bietet Angular2 zwei Möglichkeiten, um dies zu erreichen:

Injizieren Sie das übergeordnete Element in die untergeordnete KomponenteVerwenden Sie ContentChildren (oder ViewChildren), um auf die untergeordneten Elemente der Komponente zuzugreifen.

Beide funktionieren einwandfrei, wenn Sie den Typ der Klasse kennen, mit der Sie arbeiten (ChildComponent), aber scheinbar fehlschlagen, wenn Sie versuchen, die Basisklasse dieser Komponenten (BaseComponent) als Selektor zu verwenden.

Um es in einem Code zu visualisieren (siehe dieses Plunker für eine Live-Demo) habe ich eine Anwendungskomponente / Klasse wie folgt:

@Component({
  selector: 'my-app',
  template: `<parent-comp>
      <child-comp1></child-comp1>
      <child-comp1></child-comp1>
      <child-comp2></child-comp2>
    </parent-comp>`,
  directives: [ParentComponent, ChildComponent1, ChildComponent2]
})
export class MyApplication  {
}

Die Basisklasse und die untergeordneten Klassen sind wie folgt definiert:

export class BaseComponent {
  // Interesting stuff here
}

@Component({
  selector: 'child-comp2',
  template: '<div>child component #2</div>'
})
export class ChildComponent2 extends BaseComponent {
}

@Component({
  selector: 'child-comp1',
  template: '<div>child component #1</div>'
})
export class ChildComponent1 extends BaseComponent {
}

Und die Parent-Klasse verfügt über eine Logik zum Zählen ihrer untergeordneten Elemente.

@Component({
  selector: 'parent-comp',
  template: `<div>Hello World</div>
   <p>Number of Child Component 1 items: {{numComp1}}
   <p>Number of Child Component 2 items: {{numComp2}}
   <p>Number of Base Component items: {{numBase}}
   <p><ng-content></ng-content>
  `
})
export class ParentComponent implements AfterContentChecked  {

  @ContentChildren(ChildComponent1) contentChild1: QueryList<ChildComponent1>
  @ContentChildren(ChildComponent2) contentChild2: QueryList<ChildComponent2>
  @ContentChildren(BaseComponent) contentBase: QueryList<BaseComponent>
  public numComp1:number
  public numComp2:number
  public numBase:number

  ngAfterContentChecked() {
    this.numComp1 = this.contentChild1.length
    this.numComp2 = this.contentChild2.length
    this.numBase = this.contentBase.length
  }

(Auch hier können Sie eine Live-Demo sehenHie)

Die Ausgabe für die ersten beiden Zähler ist wie erwartet. Es gibt 2 ChildComponent1- und 1 ChildComponent2-Kinder. Leider zeigt der BaseComponent-Leistungsindikator nicht die Summe dieser Leistungsindikatoren, sondern 0 an. In den untergeordneten Leistungsindikatoren wird keine Klasse vom Typ BaseComponent gefunden.

Das Gleiche passiert, wenn sich ParentComponent auch von BaseComponent aus erstreckt und Sie es in eine ChildComponent einfügen möchten. Der Injector benötigt den spezifischen Typ der ParentComponent und kann nicht mit der Basisklasse arbeiten.

Hinweise zur Arbeit mit abgeleiteten Klassen in Angular2? Vermisse ich etwas oder versuche ich etwas Unmögliches?