javascript - 访问 Angular 5 组件中的 javascript 变量

Question

我的 Angular 应用程序中有一个 js 文件 data.js 。该 js 文件中声明了一些变量，如下所示。

 var data = 'test'

现在我必须在我的组件 (app.component.ts) 中访问这些变量及其值。

我读到一些将它们声明为导出的地方，使它们成为模块并且可以在任何地方访问它们，但我不确定如何做到这一点。

这是我的应用程序的结构。我在assets->js文件夹中有data.js。我需要修改app.component.ts中的变量值。

我对 Angular 还很陌生。这可能吗？

Answer 1

通过您的 Assets 中的文件，我猜您正在窗口上声明它。您需要将脚本包含在index.html中，然后通过window.data在组件内的窗口上访问它。除非您的用例要求，否则这实际上并不是推荐的方法。您提到的模块方法是首选。

在 app.component.ts 旁边，创建一个名为 data.ts 的文件，其中包含:

export let data: string = 'data';

在您的 app.component.ts 中，使用以下命令导入它:

import { data } from './data.ts';

如果您打算不改变该数据，请考虑使用 const 关键字(在 data.ts 中)。

目录结构

/app.component.ts
/data.ts
/...

编辑:显示全局方法

您需要将脚本包含在 Angular 应用程序上下文之外。如果您使用 Angular CLI 引导应用程序，则可以在 cli 配置文件中添加对其的引用。请参阅 topic 上的此文档.

该文件将被包含在内，并且可以在窗口上的组件中访问。棘手的部分是 typing and the Window 。示例可能如下所示。

class AppComponent extends Component {

     private data: string;
     constructor() {
       // Explicitly cast window as an any type.  Would be better to type this, but this should work for you.
       this.data = (<any>window).data;
     }       

}