Angular 4/5/6 全局变量

新手上路,请多包涵

我真的很难在我的 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 许可协议

阅读 1.3k
2 个回答

您可以通过 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 许可协议

我将环境变量与其他 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 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进