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。