угловой 2, наследующий от базового компонента

Мой вопрос является продолжением еще одного вопроса, вот так:Angular2 и поддержка наследования классов

И вот мой plunckr:http://plnkr.co/edit/ihdAJuUcyOj5Ze93BwIQ?p=preview

Я пытаюсь сделать следующее:

У меня есть некоторые общие функциональные возможности, которые придется использовать всем моим компонентам. Как уже было сказано в вышеупомянутом вопросе, это можно сделать.

Мой вопрос: Могу ли я добавить зависимости в базовый компонент? В моем планкре заявленная зависимость (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  {

}
 rinukkusu11 июл. 2016 г., 15:56
Нет, это не работает, так как вы не можете наследовать аннотации от базового класса. Но, может быть, этот ответ Тьерри Темплиера поможет вам обойти это:stackoverflow.com/a/36837482/1961059

Ответы на вопрос(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 использует импортированные библиотеки из базового класса

Следующая статья может заинтересовать вас, чтобы понять, что происходит под капотом:

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

Вы также должны знать, что работа с аннотациями напрямую имеет недостатки, особенно касающиеся автономной компиляции и самоанализа компонентов в IDE.

 Mastro09 сент. 2016 г., 03:36
Где находится эта функция Inherit?
 slowkot04 июл. 2017 г., 16:29
но как это может быть скомпилировано TSC?super(arguments);
 svvac20 мар. 2018 г., 17:25
должен прочесть:constructor (...args: any) { super(...args); }
 jcairney08 янв. 2018 г., 21:28
Да я тоже нашелsuper(arguments) приводить к ошибкам компиляции.

Ваш ответ на вопрос