Angular 2 - 存储全局变量（如身份验证令牌）以便所有类都可以访问它们的最佳方式是什么？答案

【问题标题】：Angular 2 - Whats the best way to store global variables like authentication token so all classes have access to them?Angular 2 - 存储全局变量（如身份验证令牌）以便所有类都可以访问它们的最佳方式是什么？
【发布时间】：2016-02-09 10:49:48
【问题描述】：

仅限 Angular 2 问题：

存储全局变量（如身份验证令牌或基本 url（环境设置））以便所有类都可以访问它们而不会在刷新时丢失它们的最佳方式是什么？

因此，当我登录时，我会给用户一个身份验证令牌，并通常将其存储在 $rootscope 中以获取角度 1.x。

【问题讨论】：

配置喷油器。这样，您可以请求在需要访问它们的任何地方获取注入的值。我不知道实际的语法，因此仅作为注释。参见例如blog.thoughtram.io/angular/2015/05/18/…

标签： angular typescript

【解决方案1】：

您也可以使用ngrx/store，作为全局数据（jwt 令牌除外）并以 redux 方式将其传递给“已连接”组件

【讨论】：

【解决方案2】：

在您的特定场景中，您实际上希望将令牌存储在本地存储中，因为页面刷新会导致您丢失存储在内存中的令牌值。

【讨论】：

【解决方案3】：

要创建真正的全局范围数据，您应该在应用引导期间将您的类\对象\值注册为引导函数的依赖参数

bootstrap(MyApp,[MyGlobalService]);

这将在根级别注册您的服务MyGlobalService（实际上它可以是对象或工厂函数或您自己的提供者）。现在可以将此依赖项注入到任何组件中。

与 Angular1 不同，Angular2 应用程序有多个可用的注入器，组件和注入器之间具有一对一的映射。每个组件都有自己的注入器。

Angular 开发者指南中有一些此类注册的好例子。请参阅Dependency Injection 上的指南。

@Yaniv 已经突出显示了另一个选项。

【讨论】：

那么如何将全局服务的变量访问到其他子类/组件中？
@PardeepJain 在他们的构造函数中注入

【解决方案4】：

在我看来，在 $rootScope 这样的全局变量上存储这样的参数被认为是一种不好的做法。在 Angular 1.x 上，您应该使用服务 (singelton) 从任何地方获取这些数据。这样，您的数据将随处可用 - 您可以注入您的服务并获得价值。您还可以在单元测试时模拟/监视此服务。

Angular 2 应用程序应该构建为component tree。我想您的方案的最佳解决方案是使用根组件下的服务将其保存，并将其作为输入传递给子组件。

这样，您的数据将由您的主要组件控制。它将是不可变的（子组件无法更改它）并且您的组件将没有外部引用（这是迈向良好组件架构的重要一步）。

如果您仍然想以“Angular 1.x 方式”来做，我想您可以在任何地方注入此服务并使用它的值。它不是首选选项，但比全局变量更好！

希望对您有所帮助。

【讨论】：

根据您的说法，我必须创建类/服务，然后在此处声明我要使用的全局变量，然后必须在所有子组件中导入此服务？如果我有 50 多个类/组件，则使用它，那么我必须导入此服务 50 多次而不是它的过程太长？
一个依赖于 50 多个类的类很可能是一个糟糕的设计。即使有 n 个服务，也可以将它们分组为伞式服务，用于大多数一起使用的服务。仍然最好使用具有较少依赖项的较小组件。这些组件可以组合在一起以实现所需的功能行为
不幸的是，在渲染 SVG 之类的事情时需要这样做。每个 SVG 都需要一个单独的模板，因此必须成为一个组件。当然，我们有几十个，如果我们必须将它们注册到每个视图组件中，那将会使代码变得非常混乱。从理论上讲，不允许全局范围是一件好事，但对于许多实际应用程序来说并不实用。
@PardeepJain 那是 Angular 2 的方式，很多重复的事情
“使用根组件下的服务保存它，并将其作为输入传递给子组件。” 这是个好主意。使用 DI 是一个滑坡，让每个 [ friggin ] 模块扇出到每个其他 [ friggin ] 模块。 这就是为什么在 Angular 1.x 中，我曾经将我的所有基本数据（急切加载的数据、美国州代码等）扁平化到 $rootScope 并将其引用为 $root。这是我的 only 全局视图，因为每个控制器/指令都使用 controllerAs: 'thus'，所以我无法访问 any 其他范围。 NG2 现在负责所有这些，但我仍然希望我们有 $root。