Ionic2 DI：コンポーネントへのインターフェイス実装を提供する

Question

Ionic2コンポーネント（Ionic2 Beta 10、Angular2 RC4を使用）にインターフェイスの実装を挿入したいと思います。私はIonic2コンポーネントにそれを注入するにはどうすればよい

export interface ServiceInterface { /*...*/ } 
@Injectable() 
export class ServiceImpl implements ServiceInterface { /*...*/ } 

：私たちは以下のサービスを考えてみましょうか？完全に罰金作品を以下のように

import { Component, provide, Provider } from '@angular/core'; 
import { ServiceInterface } from './service.interface'; 
import { ServiceImpl } from './service.impl'; 

@Component({ 
    providers: [ 
     // Exception: Can't resolve all parameters for SomeComponent: (?) 
     ServiceImpl, 

     // @deprecated - seen on: http://blog.thoughtram.io/angular/2015/05/18/dependency-injection-in-angular-2.html 
     provide(ServiceInterface, {useClass: ServiceImpl}), 

     // @deprecated - seen on: http://plnkr.co/edit/RSTG86qgmoxCyj9SWPwY?p=preview 
     new Binding(ServiceInterface, {toAlias: ServiceImpl}), 

     // @deprecated - seen on: https://www.dartdocs.org/documentation/angular2/2.0.0-beta.9/angular2/Provider/useClass.html 
     new Provider(ServiceInterface, {useClass: ServiceImpl}), 

     // TS Error: Cannot find name 'ServiceInterface' - even though it is properly referenced 
     {provide: ServiceInterface, useClass: ServiceImpl} 
    ] 
}) 
export class SomeComponent { 
    constructor(private service: ServiceInterface) {} 
} 

は単にServiceImplを使用して、それは私が欲しいものではありません：私は試してみました

@Component({providers: [ServiceImpl]}) 
export class SomeComponent { 
    constructor(private service: ServiceImpl) {} 
} 

任意のアイデアは、私が何をしないのですか？

Answer 1

TypeScriptでは、インターフェイスは実行時に保持されません（単に破棄されます）。したがって、Cannot find name 'ServiceInterface'エラーです。

あなたは

{provide: ServiceInterface, useClass: ServiceImpl} 

を使用する場合provide部分がトークンです。存在しないトークンを使用しています（インタフェース）。考えられる回避策は、代わりに文字列をトークンとして使用することです。

もう1つの可能な方法は、文字列の代わりにOpaqueTokenを使用することです。インターフェイスと同じ名前のものを宣言することができます。それができる方法は次のとおりです。

import { Component, Injectable, provide, Provider, OpaqueToken, Inject } from '@angular/core'; 

export interface ServiceInterface { /*...*/ } 
@Injectable() 
export class ServiceImpl implements ServiceInterface { /*...*/ } 

const ServiceInterface = new OpaqueToken("ServiceInterface"); // <----- token defined 

@Component({ 
    selector: 'my-app', 
    template: '<h1>My First Angular 2 App</h1>', 
    providers: [{provide: ServiceInterface, useClass: ServiceImpl}] // <-- providing 
}) 
export class AppComponent { 
    constructor(@Inject(ServiceInterface) private service: ServiceInterface) {} 
         ^^^^^^^^^^^^^^^^-- injecting 
} 

demo plunkerを参照してください。