Question

我正在寻找一种方法来访问外部js文件中的变量，该文件包含在assets / data文件夹中

下面是我试过的

将 test.js 放在资产/数据文件夹

中 test.js 添加了变量testvar = "heloo from external js";

在src/index.html <script src="assets/data/test.js"></script>

中添加了脚本标记

在app.component.ts我在导入后添加了这一行; declare var testvar: any;

构造函数中的

添加了这一行来记录值console.log(testvar);

结果是错误： 错误ReferenceError：未定义testvar

那么，我如何在打字稿中使用我的js变量？

Answer 1

此解决方案仅适用于我

将导入js放在src/index.html标头标记之前 build/polyfills.js和build/main.js（它们在正文标记中）;

示例：我使用src/assets/test.js创建了一个文件var testvar，在src/index.html中导入，然后在src/app/app.component.ts中声明为declare var testvar;。

<强> test.js

var testvar = "Hello from external js";

<强>的index.html

...
  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>
  <script src="assets/js/test.js"></script> //here, not in body
...

<强> app.componet.ts

declare var testvar;

@Component({
   templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  constructor(private statusbar : StatusBar,  splashScreen: SplashScreen) {
   alert(testvar);
...

Answer 2

扩展misha130的答案。您需要将其导入到您想要的文件中：

import * as test from '../assets/data/test'

这样您就可以访问测试变量。

console.log(test.testvar);

Answer 3

从index.html中删除它并像这样使用它：

void*

Answer 4

这是适用于离子3.20.0的解决方案：

创建此文件src / assets / data / test.js。在此文件中声明这些变量：

testvar = "Hello from external js"; // notes: there is no var keywork testvar2 = "Hello from external js"; // notes: there is no var keywork var testvar3 = "Hello from external js"; // this will not work
在app.component.ts中，添加以下行以导入javascript文件并声明其变量：

import * as test from '../assets/data/test'; // check correct path declare var testvar: any; // each declaration should be on separate line declare var testvar2: any; declare var testvar3: any;
现在在app.component.ts中，您可以访问这些变量：

console.log(testvar); // not test.testvar console.log(testvar2); console.log(testvar3); // will be undefined because of the var keywork

最后的话：如果我们上面这样做，就没有必要在src / index.html中添加一个指向test.js的链接。

Answer 5

以上解决方案都不适合我，在第一个解决方案中，在加载应用程序时加载js文件并不是一个完美的解决方案，当您具有批量js文件时。

我一直在寻找用于加载外部库的动态解决方案，并且有用于加载异步JavaScript文件的库。 https://www.npmjs.com/package/scriptjs

安装软件包：

npm i scriptjs

然后在如下所示的任何地方使用它：

import { get } from 'scriptjs';

ngOnInit() {

    get("assets/js/searchEmp.js", () => {
        getSerchInspContext = this;
        loadSearchEmp();
    });}

OR

您可以简单地使用jquery方法在标题中添加或删除脚本标签。

要添加.js文件，请在ngOnInit（）下的以下行调用：

$('head').append('<script async src="assets/js/search.js"></script>');

删除.js文件：

document.querySelector('script[src="assets/js/search.js"]').remove();

如何在离子3中包含JS文件

5 个答案: