访问 Angular 5 组件中的 javascript 变量

Question

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

 var data = 'test'

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

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

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

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

Answer 1

有了资产中的文件，我猜你是在窗口上声明它。您需要在 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 配置文件中添加对它的引用。请参阅有关该主题的文档。

该文件将被包含在内，并可在窗口上的组件中访问。棘手的部分是打字和 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;
     }       

}