首页 > javascript > 在Angular 6 / Typescript中声明一个全局变量

在Angular 6 / Typescript中声明一个全局变量 (Declaring a global variable in Angular 6 / Typescript)

问题

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

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

我尝试使用此方法 - 在Angular 2 / Typescript中声明全局变量的最佳方法是什么, 并使用这些conntent创建名为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

将不胜感激,谢谢。

解决方法

使用TypeScript现在使用的JavaScript模块(也称为ECMAScript模块的“ESM”),导入是导出的只读视图,这就是您无法diffMode从其定义的模块外部写入的原因。

如果需要从其他模块写入它,可以公开一个函数来设置其值:

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

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

关于plunker的实例(在JavaScript中,但无所谓)(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';顶部。

问题

I have two files, 'Drawer.ts' and the 'sidenav-open-close.component.ts' componenet.

I need a variable to be shared between these two, with the option to change it's value in 'Drawer.ts', and 'sidenav-open-close.component.ts' will act accordingly.

I tried using this method - What is the best way to declare a global variable in Angular 2 / Typescript and created a file named globals.ts with these conntent:

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

and imported it in both files with import * as myGlobals from './src/globals.ts';

I managed to read diffMode, but when trying to set it through 'Drawer.ts' i get the following error:

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

Help will be appreciated, Thanks.

解决方法

With JavaScript modules (aka "ESM" for ECMAScript Module), which TypeScript now uses, imports are a read-only view of the export, which is why you can't write to diffMode from outside the module it's defined in.

If you need to write to it from a different module, you can expose a function to set its value instead:

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

...and then call that function from the other module, rather than writing to it directly.

Live Example (in JavaScript, but it doesn't matter) on plunker (Stack Snippets don't allow modules, sadly).

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);

If you run that, you'll see that the change othermod.js makes to diffMode does happen and get observed by main.js's code.


Side note: Modules are always in strict mode, so you don't need the 'use strict'; at the top.

相似信息