角4/5/6全局变量

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

我有一个叫 Globals.ts的文件，看起来像这样:

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




@Injectable()
export class Globals {


var role = 'test';


}

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

{{ role }}

我已经通过以下方式将 globals.ts 文件添加到我的 应用程序模块中:

providers: [
Globals
],

不管我对这份文件做了什么，都没用。我不想做的是手动导入每个组件中的 globals.ts 文件，这就是为什么我想使用提供者特性。

248382 次浏览
小开
最佳答案

您可以访问 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) {}
}

我在 HelloComponent中提供了 Globals，但是它可以在一些 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的值。

小开

我利用了环境。它自动工作，你不必创建新的注入服务和最有用的我，不需要通过构造函数导入。

1)在你的 环境保护中创建环境变量

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

2) * . ts 文件 创造 public 变量(即“ env”)中的 进口环境能够在 html 模板中使用

import { environment } from 'environments/environment';


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

3)在模板中使用它..。

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

在..。

env.isContentLoading = false

(或者只是環境.isContentLoding，以防您不需要它作為模板)

您可以在環境.ts 中創建您自己的全局控制器集合，如下所示:

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

并直接导入这些变量(y)

小开

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

Index.html

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

成分或其他任何角度的东西

. . 在进口之后接近顶部:

declare const myTest: any;

稍后:

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

您可以使用 Window 对象并在任何地方访问它。 示例 window.defaultTitle = “ my title”; 然后您就可以访问 window.defaultTitle 而不需要导入任何内容。

小开

前面提到的所有其他答案都是正确的。角度的方式将是使用管道，装饰或组件

如果您只是想显示一个字符串，那么使用一个组件

组件

<Role></Role>

室内设计师

如果你想做这样的事情:

<a href="/foo/\{\{userId}}/bar">Link</a>

您可能需要实现自己的装饰器

<a [customHref]="[/foo/:userId/bar]">Link</a>

或者，如果您使用内置的路由器模块与路由器链接，您可以简单地扩展 RouterLink 指令并实现您的更改。

烟斗

somevariable = "this is my #:userId";

\{\{someVariable | applyglobals}}

诸如此类。

小开

我将环境变量与其他 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;
}

提交答案