アンギュラ2インジェクションは継承で機能しません

Question

最近、Angular 2.0から2.4にアップグレードして以来、継承に問題があります。 子を呼び出すと、すべての依存関係が未定義になります。

• 子にはコンストラクタがありません。つまり、それは父のコンストラクタを使用します。

これはコードです：

@Injectable() 
export class ChildComponent extends ParentComponent { 

} 


export class ParentComponent implements OnInit, AfterViewInit, AfterViewChecked { 

    constructor(protected _activitySettingsControlService: ActivitySettingsControlService, 
       protected _changeDetectionRef: ChangeDetectorRef, 
       protected _elemRef: ElementRef, 
       protected _apiService: ApiService) { 

    } 

すべての依存関係がこのようにundefindされています。

理由は何ですか？

Answer 1

完全な例がない場合は、推測できません。要求されたminimal, complete and verifiable exampleの出発点として以下を使用することを検討してください。一緒に作業コンポーネントの継承とサービスの注射を示す

コードサンプル：

import { Component, Injectable } from '@angular/core'; 

@Injectable() 
export class SomeDependency { 
    public foo() { 
    return 'bar'; 
    } 
} 

@Component({ 
    selector: 'parent-comp', 
    template: `<h1>Hello from ParentComponent {{name}}</h1>`, 
    providers: [ 
    SomeDependency 
    ] 
}) 
export class ParentComponent { 
    public name; 
    constructor(private dep: SomeDependency) { 
    this.name = this.dep.foo(); 
    } 
} 

@Component({ 
    selector: 'child-comp', 
    template: `<h1>Hello from ChildComponent. SomeDependency returned {{name}}</h1>`, 
    providers: [ 
    SomeDependency 
    ] 
}) 
export class ChildComponent extends ParentComponent { 

} 


@Component({ 
    selector: 'my-app', 
    template: `<child-comp></child-comp>` 
}) 
export class AppComponent { 

} 

は、実施例のために、このplunkerを参照してください。http://embed.plnkr.co/5VNDF6/

私はSOの例を提供する新しい（も）していますので、私は可能性がありますいくつかのベストプラクティスを見逃しています。人々は改善のための提案についてコメントしてくれることを願っています。

一般的な注意点として、このコンポーネントの継承は、何かを行うための最良の方法ではありません。コンポーネントの継承よりも構図が好きです。継承 - 実際に必要な場合 - サービスに適している可能性があります：http://embed.plnkr.co/jWiOTg/