Question

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

我已经用Google搜索并在过去的3个小时内阅读了StackOverflow上的很多帖子，但似乎我无法让它发挥作用。我真的希望你能帮助我，我为提出这个问题而道歉。

所以我的文件名为 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

Answer 1

您可以通过Angular dependency injection从应用的任意位置访问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(private globals: Globals) {}
}

我在Globals中提供了HelloComponent，但它可以在某个HelloComponent's父组件中提供，甚至可以在AppModule中提供。在Globals只有无法更改的静态数据（仅限常量）之前，无关紧要。但如果不是这样，例如，不同的组件/服务可以更改该数据，那么Globals必须是singleton。在这种情况下，它应该在将要使用它的层次结构的最顶层提供。我们假设这是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';
}

<强>更新

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

Answer 2

我为此使用环境。它会自动运行，您不必创建新的可注入服务，这对我来说最有用，不需要通过构造函数导入。

1）在 environment.ts

中创建环境变量

export const environment = {
    ...
    // runtime variables
    isContentLoading: false,
    isDeployNeeded: false
}

2）在* .ts文件中导入environment.ts ，并创建公共变量（即“ env”）以便使用在html模板中

import { environment } from 'environments/environment';

@Component(...)
export class TestComponent {
    ...
    env = environment;
}

3）在模板中使用它...

<app-spinner *ngIf='env.isContentLoading'></app-spinner>

在* .ts中...

env.isContentLoading = false

（或者在不需要模板时仅使用environment.isContentLoading）

您可以在environment.ts中创建自己的全局变量集，如下所示：

export const globals = {
    isContentLoading: false,
    isDeployNeeded: false
}

并直接导入这些变量（y）

Answer 3

不太推荐，但其他答案都不是全局变量。对于真正的全局变量，您可以这样做。

Index.html

<body>
  <app-root></app-root>
  <script>
    myTest = 1;
  </script>
</body>

Component或Angular中的其他任何内容

..在导入后右上角附近：

declare const myTest: any;

...稍后：

console.warn(myTest); // outputs '1'

Answer 4

您可以使用Window对象并在任何地方访问它。例如window.defaultTitle =“我的标题”; 那么您就可以访问window.defaultTitle而不导入任何内容。

Angular 4/5/6全局变量

4 个答案:

Index.html

Component或Angular中的其他任何内容