javascript - 在 Angular 6/Typescript 中声明一个全局变量

Question

我有两个文件，'Drawer.ts' 和 'sidenav-open-close.component.ts' 组件。

我需要在这两者之间共享一个变量，并可以选择更改它在 'Drawer.ts' 和 'sidenav-open-close.component.ts' 中的值 将采取相应的行动。

我试过使用这个方法 - What is the best way to declare a global variable in Angular 2 / Typescript 并创建了一个名为 globals.ts 的文件，内容如下:

'use strict';
export var diffMode : boolean = false;

并使用 import * as myGlobals from './src/globals.ts';

将其导入到两个文件中

我设法读取了 diffMode，但是当尝试通过 'Drawer.ts' 设置它时，我收到以下错误:

ERROR TypeError: Cannot set property diffMode of [object Object] which has 
only a getter

帮助将不胜感激，谢谢。

Answer 1

对于 TypeScript 现在使用的 JavaScript 模块(ECMAScript 模块的“ESM”)，导入是导出的只读 View ，这就是为什么你不能写入 diffMode 来自其定义的模块外部。

如果你需要从不同的模块写入它，你可以公开一个函数来设置它的值:

'use strict';
export var diffMode : boolean = false;
export function setDiffMode(flag: boolean) {
    diffMode = flag;
}

...然后从另一个模块调用该函数，而不是直接写入它。

Live Example (在 JavaScript 中，但没关系)在 plunker 上(遗憾的是，Stack Snippets 不允许使用模块)。

main.js:

const handle = setInterval(() => {
    const p = document.createElement("p");
    p.appendChild(
        document.createTextNode(`diffMode = ${diffMode}`)
    );
    document.body.appendChild(p);
}, 250);
setTimeout(() => {
    clearInterval(handle);
}, 1000);

export var diffMode = false;
export function setDiffMode(flag) {
    diffMode = flag;
}

othermod.js:

import {diffMode, setDiffMode} from "./main.js";

setTimeout(() => {
    setDiffMode(true);
}, 500);

如果你运行它，你会看到 othermod.js 对 diffMode 所做的更改确实发生并被 main.js 观察到> 的代码。

---

旁注:模块始终处于严格模式，因此您不需要顶部的 'use strict';。