kątowa 2 dziedziczenie z bazowym komponentem

Question

Moje pytanie jest rozszerzeniem do innego pytanie tutaj na tak: Angular2 and class inheritance support

I tu jest moje plunckr: http://plnkr.co/edit/ihdAJuUcyOj5Ze93BwIQ?p=preview

Co staram się robić to, co następuje:

Mam pewną wspólną funkcjonalność, której wszystkie moje składniki będą musiały użyć. Jak już zostało udzielone w wyżej wymienionym pytaniu, można to zrobić.

Moje pytanie brzmi: Czy mogę mieć zależności wstrzyknięte w składnik podstawowy? W moim plunkr deklarowana zależność (FormBuilder) jest niezdefiniowana po zalogowaniu do konsoli.

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

To niemożliwe sposób to zrobić od Angular2 będzie miał tylko zapoznać się z adnotacji na bieżący składnik ale nie powyżej składnika.

Mając na uwadze powyższe, można pracować na poziomie adnotacji, aby odziedziczyć adnotacje komponentu nadrzędnego:

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

i używać go tak:

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

Zobacz to pytanie dla bardziej szczegóły:

• Angular2 use imported libs from base class

Poniższy artykuł może zainteresuje cię zrozumieć, co dzieje się pod maską:

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

Należy również mieć świadomość, że pracuje nad adnotacji bezpośrednio ma wady zwłaszcza dotyczące kompilacji w trybie offline i za introspekcja komponentów w IDE.