Angular 2：根据环境导入服务

Question

根据 angular-cli 项目中的当前环境导入服务的最佳/正确方法是什么？

我已经设置了一个名为 dev-mock 的新环境，我可以调用它...

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 创建接口，例如。IApi 服务。如果你想互换它们，就必须有一个。

使用令牌创建一个文件并将其导出：

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 }]

最后，您可以使用构造函数中应用的 Inject() 装饰器在任何地方使用它，例如。

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

@Injectable()
export class TicketService {

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

技巧是将 gice 接口作为属性类型，并使用 Inject() 和 OpaqueToken 来告诉依赖注入器应该放置什么。