如何在 ionic 3 中包含 JS 文件

Question

我正在寻找一种从我包含在 assets/data 文件夹

中的外部 js 文件访问变量的方法

下面是我试过的

已将 test.js 放入 assets/data 文件夹

在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);

结果是 error : ERROR ReferenceError: testvar is not defined

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

Answer 1

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

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

Answer 2

扩展 misha130 的回答。您需要像这样将其导入到您想要的文件中：

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

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

console.log(test.testvar);

Answer 3

这个解决方案只对我有用

Put the import js in src/index.html header tag, before the build/polyfills.js and build/main.js (they are in body tag);

示例：我创建了一个带有 var testvar 的文件 src/assets/test.js，在 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 4

这是适用于 ionic 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中的test.js不需要添加link。html如果我们像上面那样做的话。

Answer 5

None 以上解决方案对我有用，在第一个解决方案中，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 方法在您的 header 中添加或删除脚本标签。

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

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

删除 .js 文件：

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

如何在 ionic 3 中包含 JS 文件

How to Include JS file in ionic 3

typescript

ionic2

ionic3

angular