类继承支持

Question

我在Typescript中构建一个Angular2应用程序,并希望使用Typescript提供的类系统功能(读取:类继承).但是,似乎Angular2在派生类中表现不佳.我正在寻找一些帮助我的应用程序工作.

我面临的问题是我有一个基类,并从那里派生了一些子类.当我构建我的组件树时,我希望能够访问组件的父/子(两种方式都可以).据我所知,Angular2提供了两种方法来实现这一目标:

1. 将父级注入子组件
2. 使用ContentChildren(或ViewChildren)访问组件的子项.

这两个工作,如果你知道你与(ChildComponent)工作类的类型,但忽视了,当您尝试使用的基类,这些部件(BaseComponent)作为选择的.

要在某些代码中将其可视化(请参阅此Plunker以获得实时演示),我有一个应用程序组件/类,如下所示:

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

基类和子类定义为:

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

而且Parent类有一些逻辑来计算它的子节点.

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

(再次,您可以在这里看到现场演示)

前两个计数器的输出符合预期.有2个ChildComponent1和1个ChildComponent2子项.不幸的是,BaseComponent计数器没有显示这些计数器的总和,但显示为0.它没有在子节点中找到任何类型为BaseComponent的类.

当ParentComponent也从BaseComponent扩展并且您想将它注入ChildComponent时,会发生同样的事情.Injector将需要ParentComponent的特定类型,并且不能使用基类.

有关如何在Angular2中使用派生类的任何线索？我错过了什么或尝试了不可能的事情吗？

Answer 1

向每个派生组件添加提供程序,将基本组件别名化为派生组件:

@Component({
  selector: 'child-comp2',
  template: '<div>child component #2</div>',
  providers: [{provide: BaseComponent, useExisting: forwardRef(() => ChildComponent2) }]
})
export class ChildComponent2 extends BaseComponent {
}

@Component({
  selector: 'child-comp1',
  template: '<div>child component #1</div>',
  providers: [{provide: BaseComponent, useExisting: forwardRef(() => ChildComponent1) }]
})
export class ChildComponent1 extends BaseComponent {
}

Plunker:http://plnkr.co/edit/5gb5E4curAE2EfH2lNZQ?p=preview