角度2は、

Question

私の質問はここにように別の質問への拡張であるベースコンポーネントから継承：Angular2 and class inheritance support

そして、ここでは私のplunckrです： 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のコンポーネントイントロスペクション