javascript - 如何创建可以在 Angular 4 中的所有组件中访问的全局变量和函数

Question

我正在努力处理全局变量，因为我想要一些需要在所有组件中访问的变量，所以我应该在Angular 4中做什么。

我尝试过这样的事情:

创建了一个名为 global.ts 的文件，并创建了一个名为 GlobalComponent 的类，如下所示

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

我通过导入和创建实例在 HeaderComponent 上使用它，它工作正常，但要导入每个文件以使其可用，这是一个非常漫长的过程。

所以我希望它可以在所有组件上使用，而无需导入它。

有什么方法或技巧可以实现这一目标吗？任何建议将不胜感激:)

Answer 1

正如 @bgraham 所建议的那样，让 Angular 注入(inject)器实例化服务绝对是更好的选择。

但是您也可以仅导出带有键值对(包括函数)的简单对象。然后您可以简单地导入并使用它(无需实例化部分)。

globals.ts 文件:

export const GLOBALS = {
  globalVar: 'My Global Value',
  globalFunc: () => alert('123')
};

你的.component.ts 文件:

import { GLOBALS } from './globals.ts';

console.log(GLOBALS.globalVar);
GLOBALS.globalFunc();

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