如何使全局变量和函数可以在角度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个文件中进行更改。