如何使全局变量和功能,可以在所有组件角度4
我正在努力与全球变量因为我想要一些变量,我需要在所有组件访问,所以我应该怎么做在角4。如何使全局变量和功能,可以在所有组件角度4
我已经试过这样的事情:
创建一个文件与global.ts
的名称,并提出了类名GlobalComponent
像这样
export class GlobalComponent {
globalVar:string = "My Global Value";
}
,并使用它HeaderComponent我通过导入和制作实例,它的工作正常,但这是非常漫长的过程导入每个文件,以获得它。
所以我希望它可以在所有组件上使用而不需要导入它。
是否有任何方法或窍门来实现这一目标?任何建议,将不胜感激:)
我不认为你想要做什么是可能的,这可能不是一个好主意。
导入语句是webpack(或其他打包程序)如何构建树来确定要包含哪些文件。因此,将全局文件内置到所有捆绑包中可能会非常棘手。
另外我会补充说,我不确定只是导入静态文件是要走的路。它有点快速和肮脏,这可能是你想要的,但是对于生产应用程序,我会建议做一个角度服务并注入它。
export class GlobalVariablesService {
globalVar:string = "My Global Value";
}
这样你就可以嘲笑这些单元测试或者可能传递不同的变量,这取决于你将来不断变化的需求。
如果您需要这些更新并将其推送到整个应用程序的许多组件中,则可以查看Redux。它非常适合那种事情。
对不起,也许不那么@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语句 - 即是打字稿工作的一部分...
是@martin - 你说得很对,但是在800个组件中导入相同的文件也是一项艰巨的任务 –
是的,我明白了,但正如我在我的回答中指出的那样,可能没有办法摆脱导入语句它需要打字机知道你想要访问什么...... –
只需在src文件夹下创建常量文件 - constant.ts。
现在导入常量。每当你需要的参数TS文件被称为
它看起来像这样
出口常量不变= { COSNT_STRING: '我的全球价值', }
如何使用常数:
1)导入文件。 2)constant.CONST_STRING
此外,这是一个很好的做法,从未来的预期,如果你想修改一个文件,而不是在800个文件中的变化的响应。
这已经被@MartinAdámek –
建议,关于文件的更改,我们仍然需要在800个文件中进行更改以导入常量文件 –
感谢您的好建议,这对于拥有1000个以上组件的最大应用程序来说只是我的观点,我们需要在800个组件中添加全局文件。所以这将是如此漫长和糟糕的方式来完成它,并且非常难以管理一年。不是吗? –
肯定会有点冗长。也不得不一直从@angular导入{Component},但这是确保代码高效捆绑的体系结构的一部分。它是一个权衡。另一方面,我认为这不会触及到管理。没有全球命名空间污染,这是一个加号。而且您将对您的服务有精细的控制。 800个地方将来很容易进行更改和更新。该服务仅在一个地方,但随处可见。 – bgraham