Question

我正在努力解决全局变量，因为我想要一些我需要在所有组件中访问的变量，所以我应该在 angular 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();

顺便说一下，我认为没有办法摆脱import语句 - 这是打字稿工作原理的一部分......

Answer 2

我不认为你想做什么是可能的，这可能不是一个好主意。

import语句是webpack（或其他捆绑包）如何构建树以确定要包含哪些文件的方式。因此，将全局文件内置到所有捆绑包中可能会很棘手。

另外我想补充一点，我不确定只是导入静态文件也是要走的路。它有点快速和肮脏，这可能是你想要的，但对于生产应用程序，我建议制作角度服务并注入它。

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

通过这种方式，您可以根据不断变化的需求模拟这些单元测试，或者可能传递不同的变量。

如果您需要更新这些内容并将其推送到整个应用程序中的许多组件中，您可能会考虑使用Redux。它非常适合这种事情。

对不起，也许不是你希望的答案

Answer 3

只需在src文件夹下创建常量文件 - constant.ts。

现在，只要需要调用参数

，就导入constant.ts文件

看起来像这样

export const constant = { COSNT_STRING：＆＃39;我的全球价值＆＃39;， }

如何使用常量：

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

如果您想修改仅在800个文件中的一个文件中进行更改的响应，这也是未来预期的良好做法。