如何在Angular2中基于特定的构建环境注入不同的服务？

IMO，更好的选择是使用 angular-in-memory-web-api.它嘲弄Http使用的后端，因此它不是进行实际的XHR调用，而是抓取你提供给它的数据。要获得它，只需安装

npm install --save angular-in-memory-web-api

要创建数据库，请在InMemoryDbService中实现createDb方法

import { InMemoryDbService } from 'angular-in-memory-web-api'

export class MockData implements InMemoryDbService {
  let cats = [
    { id: 1,name: 'Fluffy' },{ id: 2,name: 'Snowball' },{ id: 3,name: 'Heithcliff' },];
  let dogs = [
    { id: 1,name: 'Clifford' },name: 'Beethoven' },name: 'Scooby' },];
  return { cats,dogs,birds };
}

然后配置它

import { InMemoryWebApiModule } from 'angular-in-memory-web-api';

@NgModule({
  imports: [
    HttpModule,InMemoryWebApiModule.forRoot(MockData,{
      passThruUnknownUrl: true
    }),]
})

现在，当您使用Http并向/ api / cats发出请求时，它将从数据库中获取所有猫。如果你去/ api / cats / 1它会得到第一只猫。您可以执行所有CRUD操作，GET，POST，PUT，DELETE。

需要注意的一点是它需要一个基本路径。在示例中，/ api是基本路径。您还可以在配置中配置根(与基础不同)路径

InMemoryWebApiModule.forRoot(MockData,{
  rootPath: 'root',passThruUnknownUrl: true // forwards request not in the db
})

现在你可以使用/ root / api / cats。

UPDATE

关于如何从开关切换到生产的问题，您可以使用工厂来创建提供者。如果您要使用模拟服务而不是内存中的web-api，情况也是如此

providers: [
  Any,Dependencies
  {
    // Just inject `HeroService` everywhere,and depending
    // on the environment,the correct on will be chosen
    provide: HeroService,useFactory: (any: Any,dependencies: Dependencies) => {
      if (environment.production) {
        return new HeroService(any,dependencies);
      } else {
        return new MockHeroService(any,dependencies);
      }
    },deps: [ Any,Dependencies ]
]

至于in-memory-web-api，我需要回复你(我需要测试一个理论)。我刚开始使用它，并没有达到我需要切换到生产的程度。现在我只有上面的配置。但我确信有一种方法可以让它无需改变任何东西

更新2

好吧，对于im-memory-web-api我们可以做的而不是导入Module，就是提供模块提供的XHRBackend。 XHRBackend是Http用于进行XHR调用的服务。内存中的wep-api嘲笑这项服务。这就是所有模块所做的。所以我们可以使用工厂自己提供服务

@NgModule({
  imports: [ HttpModule ],providers: [
    {
      provide: XHRBackend,useFactory: (injector: Injector,browser: BrowserXhr,xsrf: XSRFStrategy,options: ResponSEOptions): any => {
        if (environment.production) {
          return new XHRBackend(browser,options,xsrf);
        } else {
          return new InMemoryBackendService(injector,new MockData(),{
            // This is the configuration options
          });
        }
      },deps: [ Injector,BrowserXhr,XSRFStrategy,ResponSEOptions ]
    }
  ]
})
export class AppHttpModule {
}

请注意BrowserXhr，XSRFStrategy和ResponSEOptions依赖项。这就是原始XHRBackend的创建方式。现在，只需导入AppHttpModule，而不是将HttpModule导入您的app模块。

就环境而言，这是你需要弄清楚的事情。使用angular-cli，当我们构建生产模式时，已经是一个自动切换到生产的环境。

这是我用来测试的完整示例

import { NgModule,Injector } from '@angular/core';
import { HttpModule,XHRBackend,ResponSEOptions,XSRFStrategy } from '@angular/http';

import { InMemoryBackendService,InMemoryDbService } from 'angular-in-memory-web-api';

let environment = {
  production: true
};

export class MockData implements InMemoryDbService {
  createDb() {
    let cats = [
      { id: 1,name: 'Fluffy' }
    ];
    return { cats };
  }
}

@NgModule({
  imports: [ HttpModule ],{});
        }
      },ResponSEOptions ]
    }
  ]
})
export class AppHttpModule {
}