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

Question

我正在寻找一种从外部js文件访问变量的方法，我将其包含在资产/数据文件夹中

以下是我尝试过的

放置在资产/数据文件夹中的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);

结果是错误：错误

引用错误：未定义测试变量

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

Answer 1

这个解决方案只对我有用

将导入 js 放在标头标记src/index.html前面 build/polyfills.js和build/main.js(它们在身体标签中(;

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

测试.js

var testvar = "Hello from external js";

索引.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

将其从索引中删除.html并像这样使用它：

import '../assets/data/test';

Answer 4

这是在

ionic 3.20.0 上为我工作的解决方案：

1. 创建此文件 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

2. 在 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;

3. 现在在 app.component.ts 中，您可以像这样访问这些变量：

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

最后一句话：如果我们像上面一样做，.js src/index.html，则无需添加测试链接。

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

或

您可以简单地使用 jquery 方法在标头中附加或删除脚本标记。

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

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

删除.js文件：

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