angularjs – Angular2和类继承支持

我在Typescript中构建一个Angular2应用程序，并希望使用Typescript提供的类系统功能(读：类继承)。然而，似乎Angular2不是玩派生类很好。我正在寻找一些帮助，让我的应用程序工作。

我面临的问题是，我有一个基类，并从那里导出一些子类。当我建立我的组件树，我想能够访问组件的父/子组件(任一方式是罚款)。从我的理解，Angular2提供了两个选项来完成：

>将父进程注入子组件
>使用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 {
}

父类有一些逻辑来计算它的孩子。

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

(再次，你可以看到一个现场演示here)

前两个计数器的输出如预期。有2个ChildComponent1和1个ChildComponent2子代。不幸的是，BaseComponent计数器不显示这些计数器的总和，但显示0.它没有找到任何类型BaseComponent在孩子的类。

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

任何关于如何使用Angular2派生类的线索？我缺少某物或尝试不可能的东西？

向每个派生组件添加提供程序，将基本组件别名到派生组件：

@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>',useExisting: forwardRef(() => ChildComponent1) }]
})
export class ChildComponent1 extends BaseComponent {
}

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

原文链接：https://www.f2er.com/angularjs/145188.html

angularjs – Angular2和类继承支持

猜你在找的Angularjs相关文章