angolare 2 che eredita da una base-componente

Question

La mia domanda è un'estensione ad un'altra domanda qui su così: Angular2 and class inheritance support

E qui è il mio plunckr: http://plnkr.co/edit/ihdAJuUcyOj5Ze93BwIQ?p=preview

Quello che sto cercando di fare è il seguente:

Ho alcune funzionalità comuni che tutti i miei componenti dovranno utilizzare. Come già è stato risposto nella domanda di cui sopra, questo può essere fatto.

La mia domanda è: Posso avere delle dipendenze iniettate nel componente di base? Nel mio plunkr la dipendenza dichiarata (FormBuilder) non è definita quando viene registrata nella console.

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

Non è possibile il modo di fare da quando Angular2 avrà solo un'occhiata alle annotazioni del componente corrente, ma non sul componente di cui sopra.

Detto questo, si può lavorare a livello di annotazioni per fare annotazioni ereditare il componente principale:

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); 
    } 
} 

e usarlo in questo modo:

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

Vedere questa domanda per più dettagli:

• Angular2 use imported libs from base class

Il seguente articolo potrebbe interessare a capire cosa succede sotto il cofano:

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

È inoltre necessario essere consapevoli che lavorare su annotazioni ha direttamente inconvenienti soprattutto per quanto riguarda offline compilazione e per introspezione dei componenti negli IDE.