类继承支持 [英] Class inheritance support

问题描述

我正在用Typescript构建Angular2应用程序，并想使用Typescript提供的类系统功能(阅读:类继承).但是，似乎Angular2在派生类上的表现不佳.我正在寻找使我的应用程序正常运行的帮助.

I am building an Angular2 application in Typescript and would like to use the class system functionality (read: class inheritance) offered by Typescript. However, it seems that Angular2 is not playing nice with derived classes. I am looking for some help in getting my application to work.

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

The problem I am facing is that I have a base class and derive a few child classes from there. When I am building up my component tree, I would like to be able to access the parent/children of the components (either way is fine). From what I understand, Angular2 offers two options to accomplish that:

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

如果您知道要使用的类的类型(ChildComponent)，两者都可以正常工作，但是当您尝试使用这些组件的基类(BaseComponent)作为选择器时，似乎都失败了.

Both work fine if you know the type of the class you are working with (ChildComponent), but seem to fail when you try to use the base class of these components (BaseComponent) as selector.

要通过一些代码对其进行可视化(有关实时演示，请参见 Plunker )，我有一个应用程序组件/class如下:

To visualize it in some code (see this Plunker for a live demo), I have an application component/class as follows:

@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类有一些逻辑来计数其子级.

And the Parent class has some logic to count its children.

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

(同样，您可以在此处)观看实时演示

(Again, you can see a live demo here)

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

The output for the first two counters is as expected. There are 2 ChildComponent1 and 1 ChildComponent2 children. Unfortunetely, the BaseComponent counter doesn't show the sum of these counters, but shows 0. It doesn't find any class that is of type BaseComponent in the children.

当ParentComponent也从BaseComponent扩展而您想将其注入到ChildComponent中时，也会发生同样的事情.注入器将需要特定类型的ParentComponent，并且不能与基类一起使用.

The same thing happens when ParentComponent also extends from BaseComponent and you want to Inject it into a ChildComponent. The Injector will require the specific type of the ParentComponent and can't work with the base class.

关于如何在Angular2中使用派生类的任何线索?我是想念某些东西还是尝试一些不可能的事情?

Any clues on how to work with derived classes in Angular2? Am I missing something or trying something impossible?

推荐答案

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

Add a provider to each derived component, aliasing the base component to the derived component:

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

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

这篇关于类继承支持的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！