在Angular 2中存储环境变量

我目前正在基于开发Angular 2的应用程序。我正在寻找存储环境变量的最佳方法，以便可以存储不同的值，例如，API url

默认配置文件（seed.config.ts）已经有两个环境，在为生产或开发构建时使用：

/**
 * The enumeration of available environments.
 * @type {Environments}
 */
export const ENVIRONMENTS: Environments = {
  DEVELOPMENT: 'dev',
  PRODUCTION: 'prod',
  STAGING: 'staging'
};

在这个配置文件中，定义了一个SeedConfig类，它定义了一些常量，我想这应该是我应该添加变量的地方。这给了我：

export class SeedConfig {

  PORT = argv['port'] || 8000;
  URL_DEV = 'www.example.com';
  URL_PROD = 'www.example.com';

现在，根据配置的环境，在我的模板中访问这些变量的最佳方法是什么？

1）

提供课程

bootstrap(AppComponent, [provide('SeedConfig', {useClass: SeedConfig}]);

bootstrap(AppComponent, [SeedConfig]);

或

像这样访问它

@Component({
  selector: 'some-component',
  template: `<div>{{seedConfig.DEVELOPMENT}}</div>
  ...
})
export class SomeComponent {
  constructor(@Inject('SeedConfig') private seedConfig:any) {}
}

@Component({
  selector: 'some-component',
  template: `<div>{{seedConfig.DEVELOPMENT}}</div>
  ...
})
export class SomeComponent {
  constructor(private seedConfig:SeedConfig) {}
}

或

像这样访问它

@Component({
  selector: 'some-component',
  template: `<div>{{seedConfig.DEVELOPMENT}}</div>
  ...
})
export class SomeComponent {
  constructor(@Inject('SeedConfig') private seedConfig:any) {}
}

@Component({
  selector: 'some-component',
  template: `<div>{{seedConfig.DEVELOPMENT}}</div>
  ...
})
export class SomeComponent {
  constructor(private seedConfig:SeedConfig) {}
}

@组件({
选择器：“某些组件”，
模板：`{seedConfig.DEVELOPMENT}}
...
})
导出类组件{
构造函数（私有seedConfig:seedConfig）{}
}

---

第二种方法的优点是，自动完成可以列出所有配置的属性，但它还要求在使用它的任何地方导入

SeedConfig

。

Hmm有一点我不确定如何继续，我不需要模板中的变量，但需要组件中的变量。我如何访问组件中的这些变量？只需

this.seedConfig.DEVELOPMENT

@GünterZöchbauer将这些变量保存在environment.ts中是错误的吗？@Sofia我不理解这个问题。为什么会错呢？它通常取决于上下文。如果您希望使用不同的值多次部署应用程序，或者如果您希望在开发、登台、生产。。。