在 Angular 6 / Typescript 中声明一个全局变量答案

【问题标题】：Declaring a global variable in Angular 6 / Typescript在 Angular 6 / Typescript 中声明一个全局变量
【发布时间】：2019-07-27 04:35:58
【问题描述】：

我有两个文件，'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

我们将不胜感激，谢谢。

【问题讨论】：

为什么注存储值共享服务，̶和访问它那里？̶.Thanks @ T.J.Crowder！跨度>
你只会改变 Drawer.ts 中的值吗？并且 sidenav-open-close.component.ts 是 Drawer.ts 的子级、兄弟级还是父级？
@KhaledShaaban - 我相信这就是他/她想要通过关注the question he/she linked 来做的事情。
我现在尽量避免使用Service。

标签： javascript angular typescript

【解决方案1】：

使用 TypeScript 现在使用的 JavaScript 模块（又名“ESM”表示 ECMAScript 模块），导入是导出的只读视图，这就是你不能写信给 @987654322 的原因@ 从定义它的模块外部。

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

'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';。

【讨论】：