2017-04-10 24 views
3

在angular-cli項目中,根據當前環境導入服務的最佳方式是什麼?Angular 2:基於環境的導入服務

我已經安裝了一個新的環境,被稱爲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) { 
    } 

} 

顯然,我的做法是錯誤的。什麼是正確的方法?

回答

1

爲MockApiService和ApiService創建接口,例如: IApiService。如果你想交換他們必須有一個。

創建令牌的文件,並將其導出:

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

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

最後,你可以使用應用進樣()裝飾用它在任何地方:

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

然後使用令牌地方註冊服務在構造函數中,例如。

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告訴依賴注入它應該放。

+0

你能提供一個例子,它會根據環境注入一個或其他服務嗎?我已經嘗試了幾件事情,但仍然需要在我希望使用的服務中導入一個或另一個api類,它不會基於我的提供對象自動發生。 – pulpvision