我真的很难在我的 Angular 2 应用程序中创建全局变量。
所以我有一个名为 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 发布,翻译遵循 CC BY-SA 4.0 许可协议
您可以通过 Angular 依赖注入 从应用程序的任何点访问
Globals
实体。如果要在某些组件的模板中输出Globals.role
值,您应该像任何服务一样通过组件的构造函数注入Globals
:我在
Globals
中提供了HelloComponent
,但它可以在某些HelloComponent's
父组件中提供,甚至在AppModule
中提供直到您的Globals
只有无法更改的静态数据(例如,只有常量),这才重要。但如果它不是真的,例如不同的组件/服务可能想要更改该数据,那么Globals
必须是一个 单例。在这种情况下,它应该在将要使用的层次结构的最顶层提供。假设这是AppModule
:此外,不可能像您那样使用 var ,它应该是
更新
最后,我 在 stackblitz 上创建了一个简单的演示,其中单个
Globals
在 3 个组件之间共享,其中一个可以更改Globals.role
的值。