如何在Ionic 2中调用外部JavaScript函数

Question

我在外部JS文件中有一个JavaScript方法。 在Ionic 2项目中，我必须从home.ts调用AnyJS函数的一些方法。 我已将JS文件包含在index.html的<script>标记内。 我宣布AnyJS这样的declare var AnyJS: any; 在我home.ts @Component home.ts 。

现在，在构造函数中使用new关键字创建对象时，出现以下参考错误：

5 713568错误例外：./ HomePage类HomePage_Host-内联模板：0：0中的错误，原因是：未定义AnyJS 6 713570错误原始例外：未定义AnyJS 8 713575错误ReferenceError: AnyJS is not defined

我正在使用的离子版本：

Cordova CLI: 6.3.1
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.1.0-beta.1
ios-deploy version: 1.8.3 
ios-sim version: 5.0.4 
OS: Mac OS X El Capitan
Node Version: v6.8.0
Xcode version: Xcode 8.0 Build version 8A218a 

这是home.ts ：

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

declare var AnyJS: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

    private anyjs : any;
    private method : any;

    constructor(public navCtrl: NavController) {
        this.anyjs = new AnyJS();
        this.method = this.anyjs.methodCall();
    }

}

而且，这是我的AnyJS文件：

function AnyJS(){}

AnyJS.prototype.methodCall = function() {
    console.log("Done!");
    return true;
};

注意：AnyJS文件包含具有某些属性和方法的对象，这些属性和方法不符合最新的ES6标准，而是普通的JS方法。 我需要创建一个对象并直接从home.ts调用方法。

Answer 1

将您的AnyJs文件更改为以下内容：

export class AnyJs {

  public methodCall () {
    console.log('done');
    return true;
  }

}

然后在您的home.ts文件中导入它：

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { AnyJs } from './anyjs.ts'; // or the path of the file

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

    constructor(
      public navCtrl: NavController,
      public anyJs: AnyJs) {
        this.anyJs = anyJs; 
        // And then you can use it anywhere in your file like:
        this.anyJs.methodCall().success(data => console.log(data));
    }

}

现在，如果您的AnyJs文件是ES6文件，则可以使用以下选项：

声明一个模块并导出要使用的类：

declare module "foo" { export class Foo{ } }

或声明功能为模块

export default function () { ... };


import myFunc from 'AnyJs';
myFunc();