角2 - DIが動作しない

Question

私はインターフェイス用に2つの実装を作成し、それらの実装を2つの異なるコンポーネントのプロバイダとして提供しました。このエラーが発生しました。エラー：ChildComponentのすべてのパラメータを解決できません：（？）。

どこが間違っていますか？

interface MyInterface { 
    log(msg: string): void 
} 

class DebugService implements MyInterface { 
    public log(msg:string) { 
     console.debug(msg); 
    } 
} 

class ErrorService implements MyInterface { 
    public log(msg: string) { 
     console.error(msg); 
    } 
} 


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

@Component({ 
    selector: 'my-app', 
    template: '<div (click)="log()">Root Component</div><my-child></my-child><my-child></my-child>' //app/app.component.html 
    , providers: [DebugService] 
}) 
export class AppComponent { 
    private dummy: MyInterface; 
    constructor(d: MyInterface) { 
     this.dummy = d; 
    } 
    log() { 
     this.dummy.log("Root"); 
    } 
} 


@Component({ 
    selector: 'my-child', 
    template: `<h4 (click)="log()"> Hello Child</h4>`, 
    providers: [ErrorService] 
}) 
export class ChildComponent { 
    private dummy: MyInterface; 
    constructor(d: MyInterface) { 
     this.dummy = d; 
    } 
    log() { 
     this.dummy.log("Child"); 
    } 
} 

Answer 1

依存性注入を使用するには、サービスを@Ajectableデコレータでマークする必要があります。また、インタフェースを挿入することができない場合は、提供したクラスを注入する必要があります。

@Injectable() 
class ErrorService implements MyInterface { 
    public log(msg: string) { 
     console.error(msg); 
    } 
} 
@Component({ 
    selector: 'my-child', 
    template: `<h4 (click)="log()"> Hello Child</h4>`, 
    providers: [ErrorService] 
}) 
export class ChildComponent { 
    constructor(private dummy: ErrorService) {} 
    log() { 
     this.dummy.log("Child"); 
    } 
} 

Answer 2

はAngular websiteによると、「インターフェイスは、純粋に技術的な観点から、JavaScriptと活字体の開発者のためのオプションです。JavaScript言語はインターフェイスがありません。彼らはから消えているため角度は、実行時に活字体のインタフェースを見ることができません翻訳されたJavaScript。

このため、インターフェイスを使用して具体的な実装をリクエストすることはできません。

@Injectable（）はDIが動作するために必要なデコレータではありません。そのサービスが他のサービスに依存している場合にのみ、サービスクラスに装飾されます。