Angular 4/5/6 全局变量

Question

我真的很难在我的 Angular 2 应用程序中创建全局变量。

所以我有一个名为 globals.ts 的文件，它看起来像这样：

 import { Injectable } from "@angular/core";

@Injectable()
export class Globals {

  var role = 'test';

}

我想在我的组件的 HTML 视图中使用变量角色，如下所示：

 {{ role }}

我已经通过以下方式将 globals.ts 文件添加到我的 app.module.ts 中：

 providers: [
  Globals
],

无论我对这个文件做了什么，它都不起作用。我不想做的是必须手动在每个组件中导入 globals.ts 文件，这就是我想使用提供程序功能的原因。

原文由 A E 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以通过 Angular 依赖注入 从应用程序的任何点访问 Globals 实体。如果要在某些组件的模板中输出 Globals.role 值，您应该像任何服务一样通过组件的构造函数注入 Globals ：

 // hello.component.ts
import { Component } from '@angular/core';
import { Globals } from './globals';

@Component({
  selector: 'hello',
  template: 'The global role is {{globals.role}}',
  providers: [ Globals ] // this depends on situation, see below
})

export class HelloComponent {
  constructor(public globals: Globals) {}
}

我在 Globals 中提供了 HelloComponent ，但它可以在某些 HelloComponent's 父组件中提供，甚至在 AppModule 中提供直到您的 Globals 只有无法更改的静态数据（例如，只有常量），这才重要。但如果它不是真的，例如不同的组件/服务可能想要更改该数据，那么 Globals 必须是一个 单例。在这种情况下，它应该在将要使用的层次结构的最顶层提供。假设这是 AppModule ：

 import { Globals } from './globals'

@NgModule({
  // ... imports, declarations etc
  providers: [
    // ... other global providers
    Globals // so do not provide it into another components/services if you want it to be a singleton
  ]
})

此外，不可能像您那样使用 var ，它应该是

// globals.ts
import { Injectable } from '@angular/core';

@Injectable()
export class Globals {
  role: string = 'test';
}

更新

最后，我 在 stackblitz 上创建了一个简单的演示，其中单个 Globals 在 3 个组件之间共享，其中一个可以更改 Globals.role 的值。

原文由 dhilt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我将环境变量与其他 json 文件结合使用，即显示构建信息和其他内容。这样，您可以在不同的环境中混合和/或重复使用它们。

 // environment.ts, environment.prod.ts
export const environment = {

  ...
  appName: require('../../package.json').name,
  appVersion: require('../../package.json').version,

  ...
  globalX: require('../../globals.json').X,
  globalY: require('../../globals.json').Y,
}

用法：

 import { environment } from './../environments/environment';

export class FooterComponent implements OnInit {

  appName = environment.appName;
  buildVersion = environment.appVersion;
  x = environment.globalX;
  y = environment.globalY;
}

原文由 Kurt Van den Branden 发布，翻译遵循 CC BY-SA 4.0 许可协议