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

问题描述

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

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

所以我有一个名为 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.

推荐答案

您可以通过 Angular 依赖注入.如果你想在某个组件的模板中输出 Globals.role 值，你应该像任何服务一样通过组件的构造函数注入 Globals :

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 必须是 单身.在这种情况下，它应该在将要使用的层次结构的最顶层中提供.假设这是 AppModule:

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上创建了一个简单的演示，其中单个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屋！