角度2从基础组件继承

Question

我的问题是so上另一个问题的扩展：Angular2 and class inheritance support

这就是我的想法：http://plnkr.co/edit/ihdAJuUcyOj5Ze93BwIQ?p=preview

我正在尝试做的事情如下：

我有一些共同的功能，我的所有组件都必须使用。因为它已经在前面的问题中得到了回答，所以这是可以做到的。

我的问题是:我可以在基础组件中注入依赖项吗？在我的plunkr中，声明的依赖项(FormBuilder)在登录到控制台时是未定义的。

import {AfterContentChecked, Component, ContentChildren, Input, QueryList, forwardRef, provide, Inject} from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder, REACTIVE_FORM_DIRECTIVES } from '@angular/forms';



@Component({
  providers: [FormBuilder]
})
export class BaseComponent {
  // Interesting stuff here
  @Input() id: string;

  constructor(formBuilder: FormBuilder){
    console.log(formBuilder);
    console.log('inside the constructor');
  }


}

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


}

@Component({
  selector: 'child-comp1',
  template: '<div>child component #1 ({{id}})</div>',
  providers: [provide(BaseComponent, { useExisting: forwardRef(() => ChildComponent1) })]
})
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>
   <p>Base Components:</p>
   <ul>
    <li *ngFor="let c of contentBase">{{c.id}}</li>
   </ul>
  `
})
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
  }
}

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

}

Answer 1

这是不可能的，因为Angular2只能查看当前组件的注释，而不能查看上面的组件。

也就是说，您可以在注解级别进行工作，以创建父组件的继承注解：

export function Inherit(annotation: any) {
  return function (target: Function) {
    var parentTarget = Object.getPrototypeOf(target.prototype).constructor;
    var parentAnnotations = Reflect.getMetadata('design:paramtypes', parentTarget);

    Reflect.defineMetadata('design:paramtypes', parentAnnotations, target);
  }
}

并像这样使用它：

@Inherit()
@Component({
  (...)
})
export class ChildComponent1 extends BaseComponent {
  constructor() {
    super(arguments);
  }
}

有关更多详细信息，请参阅此问题：

• Angular2 use imported libs from base class

下面的文章可能会让您有兴趣了解幕后发生的事情：

• https://medium.com/@ttemplier/angular2-decorators-and-class-inheritance-905921dbd1b7#.mrhhol5p7

您还需要意识到，直接处理批注有缺点，特别是对于离线编译和IDE中的组件内省。