角度2：環境に基づいたサービスのインポート

Question

angular-cliプロジェクト内の現在の環境に基づいてサービスをインポートする最も適切な方法は何ですか？

私は私が呼び出すことができるDEV-モックと呼ばれる新しい環境をセットアップを持っている...

ng serve --environment=mock 

私はその後useClass

アプリ/ app.moduleとモジュール内のプロバイダを設定します.TS ...

import {environment} from '../environments/environment'; 
import {ApiService} from './api/api.service'; 
import {MockApiService} from './api/mock/mock-api.service'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule 
    ], 
    providers: [ 
    { 
     provide: ApiService, 
     useClass: (environment.name === 'dev-mock') ? MockApiService : ApiService 
    } 
    ], 
    bootstrap: [AppComponent] 
}) 

これは正常に動作し、問題は、私は例えば、別のサービスまたはコンポーネントにそのを注入したいときに私は何をしますかある...

アプリ/チケット/ ticket.service.ts

import {ApiService} from '../api/api.service'; // *** WHAT AM I TO DO HERE? *** 

@Injectable() 
export class TicketService { 

    constructor(private api: ApiService, private http: Http) { 
    } 

} 

明らかに私のアプローチは間違っています。正しいアプローチは何ですか？

Answer 1

MockApiServiceとApiServiceのインターフェイスを作成します。 IApiService。それらを交換したい場合は、1つにする必要があります。

トークンでファイルを作成し、それをエクスポートします。

import { OpaqueToken } from '@angular/core'; 
export let API_SERVICE = new OpaqueToken('api.service'); 

次にトークンを使用してどこかのサービスを登録します。

const apiServiceClass = (environment.name === 'dev-mock') ? MockApiService : ApiService; 

providers: [{ provide: API_SERVICE, useClass: apiServiceClass }] 

最後には適用されジェクト（）デコレータを使用して、任意の場所でそれを使用することができますコンストラクタで、例えば。

import {IApiService} from '../api/iapi.service'; 
import { Inject, Injectable } from '@angular/core'; 

@Injectable() 
export class TicketService { 

    constructor(@Inject(API_SERVICE) private api: IApiService) {} 
} 

トリックは、プロパティの型としてインターフェイスをgice、それは置くべき依存性注入器を伝えるためにOpaqueTokenとジェクト（）を使用することです。