如何使全局變量和功能，可以在所有組件角度4

我正在努力與全球變量因爲我想要一些變量，我需要在所有組件訪問，所以我應該怎麼做在角4。如何使全局變量和功能，可以在所有組件角度4

我已經試過這樣的事情：

創建一個文件與global.ts的名稱，並提出了類名GlobalComponent像這樣

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

，並使用它HeaderComponent我通過導入和製作實例，它的工作正常，但這是非常漫長的過程導入每個文件，以獲得它。

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

是否有任何方法或竅門來實現這一目標？任何建議，將不勝感激:)

來源

2017-10-12 Hidayt Rahman

我不認爲你想要做什麼是可能的，這可能不是一個好主意。

導入語句是webpack（或其他打包程序）如何構建樹來確定要包含哪些文件。因此，將全局文件內置到所有捆綁包中可能會非常棘手。

另外我會補充說，我不確定只是導入靜態文件是要走的路。它有點快速和骯髒，這可能是你想要的，但是對於生產應用程序，我會建議做一個角度服務並注入它。

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

這樣你就可以嘲笑這些單元測試或者可能傳遞不同的變量，這取決於你將來不斷變化的需求。

如果您需要這些更新並將其推送到整個應用程序的許多組件中，則可以查看Redux。它非常適合那種事情。

對不起，也許不那麼@bgraham是在暗示你所希望看到

來源

2017-10-12 16:44:47 bgraham

感謝您的好建議，這對於擁有1000個以上組件的最大應用程序來說只是我的觀點，我們需要在800個組件中添加全局文件。所以這將是如此漫長和糟糕的方式來完成它，並且非常難以管理一年。不是嗎？ –

肯定會有點冗長。也不得不一直從@angular導入{Component}，但這是確保代碼高效捆綁的體系結構的一部分。它是一個權衡。另一方面，我認爲這不會觸及到管理。沒有全球命名空間污染，這是一個加號。而且您將對您的服務有精細的控制。 800個地方將來很容易進行更改和更新。該服務僅在一個地方，但隨處可見。 – 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();

順便說一句，我不認爲有一種方式如何擺脫import語句 - 即是打字稿工作的一部分...

來源

2017-10-12 16:51:32

是@martin - 你說得很對，但是在800個組件中導入相同的文件也是一項艱鉅的任務 –

是的，我明白了，但正如我在我的回答中指出的那樣，可能沒有辦法擺脫導入語句它需要打字機知道你想要訪問什麼...... –

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

現在導入常量。每當你需要的參數TS文件被稱爲

它看起來像這樣

出口常量不變= { COSNT_STRING： '我的全球價值'， }

如何使用常數：

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

此外，這是一個很好的做法，從未來的預期，如果你想修改一個文件，而不是在800個文件中的變化的響應。

來源

2017-10-12 18:44:11 mangesh

這已經被@MartinAdámek –

建議，關於文件的更改，我們仍然需要在800個文件中進行更改以導入常量文件 –

如何使全局變量和功能，可以在所有組件角度4

回答

相關問題