[英]how to make global variable and functions which can be accessible in all the components in angular 4
I am struggling with global variables as I want some variables which I need to access in all the components so what should i do in angular 4 . 我正在为全局变量而苦苦挣扎,因为我需要在所有组件中都需要访问的一些变量,所以我应该在角度4中做什么。
I've tried something like this: 我已经尝试过这样的事情:
Created one file with the name of global.ts
and made a class with the name GlobalComponent
something like this 创建一个名称为
global.ts
文件,并创建一个名称为GlobalComponent
的类,如下所示
export class GlobalComponent {
globalVar:string = "My Global Value";
}
and am using it on HeaderComponent by importing and making instance and it's working fine but this is very long process to import in each and every files to get it available. 并通过导入和制作实例在HeaderComponent上使用它,并且工作正常,但是要导入每个文件以使其可用,这是一个漫长的过程。
So I want it to be available on all the components without importing it. 所以我希望它在所有组件上都可用而不导入。
Is there any way or trick to achieve this? 有什么方法或技巧可以实现这一目标吗? Any suggestion would be appreciated :)
任何建议,将不胜感激:)
As @bgraham is suggesting, it is definitely better to let angular injector to instantiate the service. 正如@bgraham所建议的那样,让角度喷射器实例化服务绝对更好。
But you could also export just a simple object with key-value pairs, including functions. 但是,您也可以仅导出具有键值对(包括函数)的简单对象。 Then you can simply import it and use it (without the instantiation part).
然后,您可以简单地导入并使用它(无需实例化部分)。
globals.ts file: globals.ts文件:
export const GLOBALS = {
globalVar: 'My Global Value',
globalFunc: () => alert('123')
};
your.component.ts file: your.component.ts文件:
import { GLOBALS } from './globals.ts';
console.log(GLOBALS.globalVar);
GLOBALS.globalFunc();
Btw I don't think there is a way how to get rid of the import statement - that is part of how typescript works... 顺便说一句,我认为没有办法摆脱导入语句-这是打字稿工作原理的一部分...
I don't think what you want to do is possible and it's probably not a good idea. 我认为您想做的事不可能实现,这可能不是一个好主意。
The import statements are how webpack (or other bundlers) are able to build a tree to figure out which files to include. 导入语句是webpack(或其他捆绑程序)如何构建树以找出要包含的文件的方式。 So it might be tricky to get global files built into all your bundles.
因此,将全局文件内置到所有包中可能很棘手。
Also I would add, I'm not sure just importing the static file is the way to go either. 我还要补充一点,我不确定只是导入静态文件是可行的方法。 It's kind of quick and dirty, which maybe is what you want I guess, but for production apps I would recommend making an angular service and injecting it.
这种方式既快速又肮脏,这也许就是您想要的,但是对于生产应用程序,我建议您进行角度服务并注入它。
export class GlobalVariablesService {
globalVar:string = "My Global Value";
}
This way you can mock these for unit tests or potentially pass in different variables depending on your changing needs in the future. 这样,您就可以模拟这些以进行单元测试,或者根据将来不断变化的需求潜在地传递不同的变量。
If you need these to update and push that into lots of components throughout your app, you might look into Redux. 如果您需要这些来更新并将其推送到整个应用程序的许多组件中,则可以考虑使用Redux。 Its pretty handy for that kind of thing.
这种事情非常方便。
Sorry, perhaps not the answer you were hoping for 抱歉,可能不是您想要的答案
Simply create constant file - constant.ts under src folder. 只需在src文件夹下创建常量文件-constant.ts。
Now import constant.ts file whenever you require parameter to be called 现在,无论何时需要调用参数,都可以导入constant.ts文件
It will look like so 看起来像这样
export const constant = { COSNT_STRING : 'My Global Value', } export const constant = {COSNT_STRING:“我的全球价值”,}
how to use constant: 如何使用常量:
1) Import file. 1)导入文件。 2) constant.CONST_STRING
2)constant.CONST_STRING
Also this is a good practice from future prospective, if you want to modify response just made change in one file not in 800 files. 从将来的角度来看,这也是一个好习惯,如果您想修改响应,只需在一个文件中进行更改,而不是在800个文件中进行更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.