Angular 4/5/6全局变量 [英] Angular 4/5/6 Global Variables

问题描述

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

I really struggle with creating global variables in my Angular 2 application.

在过去3个小时中，我已经在Google上搜索并阅读了有关StackOverflow的许多帖子，但是似乎我无法使其正常运行.我真的希望您能为我提供帮助，对于这个问题，我深表歉意.

I already googled and read many posts on StackOverflow on this for the last 3 hours, however it seems like I just can't make it work. I really hope you can help me and I apologize for asking this question.

所以我有一个名为 globals.ts 的文件，该文件如下所示:

So I have my file called globals.ts, which looks like this:

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


@Injectable()
export class Globals {

  var role = 'test';

}

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

And I want to use the variable role in my HTML view of my component like this:

{{ role }} 

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

I already added the globals.ts file to my app.module.ts in the following way:

providers: [
  Globals
],

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

No matter what I did on this file, it just didn't work. What I don't want to do is to have to import the globals.ts file in every component manually, which is why I want to use the providers feature.

我真的希望您能帮助我，再次抱歉.

I really hope you can help me and sorry again.

最诚挚的问候，

A E

推荐答案

您可以通过

You can access Globals entity from any point of your App via Angular dependency injection. If you want to output Globals.role value in some component's template, you should inject Globals through the component's constructor like any service:

// 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) {}
}

我在HelloComponent中提供了Globals，但可以在某些HelloComponent's父组件中甚至在AppModule中提供.直到Globals仅具有无法更改的静态数据(例如，仅常量)，这才无关紧要.但是，如果不正确，例如，不同的组件/服务可能想要更改该数据，则Globals必须是

I provided Globals in the HelloComponent, but instead it could be provided in some HelloComponent's parent component or even in AppModule. It will not matter until your Globals has only static data that could not be changed (say, constants only). But if it's not true and for example different components/services might want to change that data, then the Globals must be a singleton. In that case it should be provided in the topmost level of the hierarchy where it is going to be used. Let's say this is 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 ，

Also, it's impossible to use var the way you did, it should be

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

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

更新

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

At last, I created a simple demo on stackblitz, where single Globals is being shared between 3 components and one of them can change the value of Globals.role.

这篇关于Angular 4/5/6全局变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！