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

Posted 2023-03-13

【中文标题】在Angular 5中访问组件中的javascript变量

【英文标题】：Access javascript variable in component in Angular 5

【发布时间】：2018-08-12 00:42:31

【问题描述】：

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

 var data = 'test'

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

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

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

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

【问题讨论】：

data 是全局变量吗？

请不要拒绝这个问题，因为我对 Angular 很陌生。

@user184994 是的。

【参考方案1】：

您希望变量成为 Component 类的成员，而不仅仅是在模块中的任何位置声明的变量。

如果这没有立即意义，您需要更仔细地查看一些基本的 Angular 代码示例。

此外，只要您使用 Angular 和 TypeScript，最好使用 let 或 const 声明变量。

【参考方案2】：

有了资产中的文件，我猜你是在窗口上声明它。您需要将脚本包含在 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;
            

【讨论】：

感谢您的回复。我知道不要使用全局变量，但我需要在我的情况下使用它。你能告诉我一个如何在 app.component.ts 中使用 window.data 的例子

如果我想使用由 3rd 方 javascript 库声明或使用的变量怎么办？比方说谷歌广告，要刷新或加载广告，我们必须使用 googletag 变量如何在角度组件中访问该变量？

【参考方案3】：

（参考https://***.com/a/42682160）

---

首先您必须将脚本包含到您的src/index.html 中

重要的是上面的语句放在你的角度根组件标签之前 （< root-component>< /root-component> 或 < ion-app>< /ion-app> 或类似的东西）

那么您可以简单地编写（例如在 app.component.ts ngOnInit 函数中）

let varFromJsFile = window["data"] // varFromJsFile = 'test'