typescript - angular 2继承自基础组件

Question

我的问题是对这里另一个问题的扩展:Angular2 and class inheritance support

这是我的 plunckr: http://plnkr.co/edit/ihdAJuUcyOj5Ze93BwIQ?p=preview

我想做的是:

我有一些共同的功能，我的所有组件都必须使用这些功能。由于在上述问题中已经得到回答，因此可以这样做。

我的问题是:我可以在基础组件中注入(inject)依赖项吗？在我的 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 中的组件自检方面。