Angular2 Typescript globalen Provider auflösen mit Schnittstelle

Question

Meine angular2 App verfügt über 2 Dienste WebStorageService und MobileStorageService, die ein Interface IStorageService implementiert. In meinem main.component ich Bootstrap die App mit WebStorageService und in einen der Komponenten I, wie unten die den Anbieter im Konstruktor zu bekommen versuchen,

// main.component 
bootstrap(AppComponent,[WebStorageService]) // WebStorageService implements IStorageService interface 

//AppComponent 
import {IStorageService} from "./IStorageService" 

@Component 
export class AppComponent { 

    constructor(private _storage: IStorageService) { } <-- throws an error Can't resolve all parameters for AppComponent 

} 

So ist es eine Möglichkeit, den Dienst mit der Schnittstelle zu schaffen, wie der Typ?

Answer 1

Ich endete mit angle2 opaken Tokens zusammen mit @rinukkusu Antwort.

// main.component 
bootstrap(AppComponent,[{provide: globalStorageService, {useClass: WebStorage} }]) 

// where globalStorageService is an opaque token 
export let globalStorageService = new Token("IStorageService"); 

//AppComponent 
@Component 
export class AppComponent { 

    constructor(@Inject(globalStorageService) _storage:IStorageService){} 

} 

Answer 2

den Anbieter Ihrer Komponente hinzufügen:

@Component({ 
    providers: [IStorageService]}) 
    export class AppComponent { 

     constructor(private _storage: IStorageService) { } 

    } 

Answer 3

Sie keine Schnittstellen für DI verwenden können. Die Kompilierung entfernt die Schnittstelleninformationen und ist daher zur Laufzeit nicht verfügbar. Schnittstellen sind nur für statische Analysen.