Angular 4/5/6全局变量

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文件,这就是我想使用提供程序功能的原因.

我真的希望你能帮助我,再次抱歉.

最好的祝福,

AE

Answer 1

您可以Globals通过Angular依赖注入从App的任何位置访问实体.如果要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上创建了一个简单的演示,其中single Globals在三个组件之间共享,其中一个组件可以更改其值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)