如何使全局變量和函數可以在角度4的所有組件中訪問

Question

我正在為全局變量而苦苦掙扎，因為我需要在所有組件中都需要訪問的一些變量，所以我應該在角度4中做什么。

我已經嘗試過這樣的事情：

創建一個名稱為global.ts文件，並創建一個名稱為GlobalComponent的類，如下所示

export class GlobalComponent {
  globalVar:string = "My Global Value";
}

並通過導入和制作實例在HeaderComponent上使用它，並且工作正常，但是要導入每個文件以使其可用，這是一個漫長的過程。

所以我希望它在所有組件上都可用而不導入。

有什么方法或技巧可以實現這一目標嗎？ 任何建議，將不勝感激:)

Answer 1

正如@bgraham所建議的那樣，讓角度噴射器實例化服務絕對更好。

但是，您也可以僅導出具有鍵值對（包括函數）的簡單對象。 然后，您可以簡單地導入並使用它（無需實例化部分）。

globals.ts文件：

export const GLOBALS = {
  globalVar: 'My Global Value',
  globalFunc: () => alert('123')
};

your.component.ts文件：

import { GLOBALS } from './globals.ts';

console.log(GLOBALS.globalVar);
GLOBALS.globalFunc();

順便說一句，我認為沒有辦法擺脫導入語句-這是打字稿工作原理的一部分...

Answer 2

我認為您想做的事不可能實現，這可能不是一個好主意。

導入語句是webpack（或其他捆綁程序）如何構建樹以找出要包含的文件的方式。 因此，將全局文件內置到所有包中可能很棘手。

我還要補充一點，我不確定只是導入靜態文件是可行的方法。 這種方式既快速又骯臟，這也許就是您想要的，但是對於生產應用程序，我建議您進行角度服務並注入它。

export class GlobalVariablesService {
  globalVar:string = "My Global Value";
}

這樣，您就可以模擬這些以進行單元測試，或者根據將來不斷變化的需求潛在地傳遞不同的變量。

如果您需要這些來更新並將其推送到整個應用程序的許多組件中，則可以考慮使用Redux。 這種事情非常方便。

抱歉，可能不是您想要的答案

Answer 3

只需在src文件夾下創建常量文件-constant.ts。

現在，無論何時需要調用參數，都可以導入constant.ts文件

看起來像這樣

export const constant = {COSNT_STRING：“我的全球價值”，}

如何使用常量：

1）導入文件。 2）constant.CONST_STRING

從將來的角度來看，這也是一個好習慣，如果您想修改響應，只需在一個文件中進行更改，而不是在800個文件中進行更改。