Estoy creando una aplicación Angular2 en Typecript y me gustaría utilizar la funcionalidad del sistema de clases (léase: herencia de clases) que ofrece Typecript. Sin embargo, parece que Angular2 no está jugando bien con las clases derivadas. Estoy buscando ayuda para que mi aplicación funcione.

El problema al que me enfrento es que tengo una clase base y obtengo algunas clases secundarias a partir de ahí. Cuando estoy construyendo mi árbol de componentes, me gustaría poder acceder a los padres / hijos de los componentes (de cualquier manera está bien). Por lo que entiendo, Angular2 ofrece dos opciones para lograr eso:

Inyectar el padre en el componente hijoUse ContentChildren (o ViewChildren) para acceder a los elementos secundarios del componente.

Ambos funcionan bien si conoce el tipo de clase con la que está trabajando (ChildComponent), pero parece fallar cuando intenta utilizar la clase base de estos componentes (BaseComponent) como selector.

Para visualizarlo en algún código (vea estoSaqueador para una demostración en vivo), tengo un componente / clase de aplicación de la siguiente manera:

@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  {
}

La clase base y las clases secundarias se definen como:

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 {
}

Y la clase Parent tiene cierta lógica para contar a sus hijos.

@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
  }

(De nuevo, puedes ver una demostración en vivoaquí)

La salida para los dos primeros contadores es la esperada. Hay 2 elementos ChildComponent1 y 1 ChildComponent2. Desafortunadamente, el contador BaseComponent no muestra la suma de estos contadores, pero muestra 0. No encuentra ninguna clase que sea del tipo BaseComponent en los elementos secundarios.

Lo mismo sucede cuando ParentComponent también se extiende desde BaseComponent y desea inyectarlo en un ChildComponent. El inyector requerirá el tipo específico de ParentComponent y no puede funcionar con la clase base.

¿Alguna pista sobre cómo trabajar con clases derivadas en Angular2? ¿Me estoy perdiendo algo o intento algo imposible?