Question

我的问题是对此处的另一个问题的扩展：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中的组件内省。

角度2继承自基础组件

1 个答案: