在 Angular 2 中存储环境变量

Question

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

默认配置文件 (seed.config.ts) 已经有 2 个用于构建生产或开发的环境：

/**
 * 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';

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

Answer 1

1)

提供课程

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

或

@Component({
  selector: 'app-component',
  providers: [provide('SeedConfig', {useClass: SeedConfig}],
  ...
})

像访问它

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

2)

或者获得正确的自动完成

提供课程

bootstrap(AppComponent, [SeedConfig]);

或

@Component({
  selector: 'app-component',
  providers: [SeedConfig],
  ...
})

像访问它

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

第二种方法的优点是自动补全可以列出所有配置的属性，但它也需要在任何使用它的地方导入SeedConfig。