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

Question

在我的angular 5应用程序中，我需要加载一些全局变量，例如principal 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存储我所有的变量，并将其提供给我的应用程序？

Answer 1

有没有一种方法可以实现这一目标，或者有其他方法可以加载全局变量？ 并创建一个文件是一个好习惯：global.ts存储我所有的变量，并将其提供给我的应用程序？

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

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

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

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

import { Globals } from './globals'

别忘了像这样在应用程序模块中添加依赖项注入

providers: [Globals]

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

Answer 2

设置全局变量绝不是一个好主意，但是...很大程度上取决于项目的情况。 当我们谈论使用全局变量时，您和您的同事需要百分百确定您的工作-例如，确保您的变量不会因其他人而改变状态，因为应用程序可能会崩溃。 在这里，您拥有Wiki-为什么全局变量不好？全局变量不好-C2 Wiki

让我们回到棱角分明的情况：您可以轻松地创建新的打字稿文件，在其中将拥有全局变量。 请记住使用{ Injectable } from '@angular/core';装饰文件{ Injectable } from '@angular/core'; 比您必须导入它们来指向您的应用程序import { GlobalAssets } from './globalAssets '开始import { GlobalAssets } from './globalAssets ' 。 在提供providers: [GlobalAssets ]提供providers: [GlobalAssets ]注册源providers: [GlobalAssets ] 。 毕竟，您可以通过IoC在组件中引用GlobalAssets。

它可能会导致一些问题，在引导应用程序之前，最好注册并读取必要的文件（配置和其他全局变量，例如从其他端点获取必要的数据），最好在Angular中启动应用程序之前读取数据 -并非百分百确定如何更改在Angular 5。