Angular 5 如何从资产中加载全局变量答案

【问题标题】：Angular 5 How to load global variables from assetsAngular 5 如何从资产中加载全局变量
【发布时间】：2018-02-14 10:21:58
【问题描述】：

在我的 Angular 5 应用程序中，我需要加载一些全局变量，如主体 Url 和其他一些东西，我正在遵循这个示例： github

所以在 app.component 中使用这个 GET 调用：

 ngOnInit() {
    this.http.get('assets/config.json')
      .map(res => res.json())
      .toPromise()
      .then((config) => {
        // do stuff with the config
        console.log(config)
      });
  }

我可以加载我的所有变量，但现在我不确定在应用程序周围需要它们之前是否已加载所有变量。

有没有办法实现这一点，或者其他加载全局变量的方法？创建一个文件是一个好习惯：global.ts 来存储我在我的应用程序周围提供它的所有变量？

【问题讨论】：

看看这里stackoverflow.com/a/47938411/1160794
如果您想从 ts 文件中获取设置，这意味着它将包含在构建中。这意味着您必须为每个环境进行单独的构建。这基本上就是 environment.[name].ts 文件在 Angular cli 中的用途

标签： javascript angular

【解决方案1】：

拥有一组全局变量从来都不是一个好主意，但是……这在很大程度上取决于您的项目的情况。当我们谈论使用全局变量时，您和您的同事需要百分百确定您在做什么——例如，确保您的变量不会因为应用程序崩溃而被其他人改变状态。在这里你有维基 - 为什么全局变量是个坏主意Global Variables Are Bad - C2 Wiki

让我们回到你的角度案例：您可以轻松地创建新的打字稿文件，您将在其中拥有全局变量。请记住使用{ Injectable } from '@angular/core'; 装饰您的文件，而不是必须将它们导入到您的应用程序启动的位置import { GlobalAssets } from './globalAssets '。在提供者providers: [GlobalAssets ] 中注册源。毕竟你可以通过 IoC 在你的组件中引用 GlobalAssets。

这可能会导致一些问题，并且在引导应用程序Reading data before application startup in Angular 之前注册和读取必要的文件（配置和其他全局变量，例如从其他端点获取必要的数据）总是更好 - 不确定它是如何更改的角 5。

【讨论】：

我了解 wiki，但是太笼统了，我需要在全局文件中进行一些设置，它不能是另一个地方，所以我关注 Reading data before startup，它似乎可以工作跨度>
如果我们谈论的是全局配置文件，最好在应用程序启动之前阅读它们一次，以确保在组件或服务加载之前一切就绪。例如，您可以拥有端点的生产/开发 IP 地址。毕竟，当你想切换时，你只需在配置中更改一个 bool 标志。

【解决方案2】：

有没有办法实现这一点，或者其他方式来加载全局变量？并且是创建文件的好习惯：global.ts 来存储我的所有变量都在我的应用程序周围提供它吗？

是的！创建一个名为 globals.ts 的文件

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

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

然后只需将其导入当前组件即可访问它。

import { Globals } from './globals'

不要忘记像这样在你的应用模块中添加依赖注入

providers: [Globals]

您可以通过 Angular 依赖注入从应用程序的任何位置访问 Globals 实体。

【讨论】：

是否可以将我的变量导入 .js 文件？