So rufen Sie eine externe JavaScript-Funktion in Ionic 2

Question

Ich habe eine JavaScript-Methode in einer externen JS-Datei. In einem Ionic 2-Projekt muss ich einige Methoden der AnyJS Funktion von meinem home.ts aufrufen. Ich habe die JS-Datei in einem <script>-Tag in index.html enthalten. Ich habe AnyJS wie dieses declare var AnyJS: any; über @Component in meinem home.ts erklärt.

nun beim Erstellen eines Objekts mithilfe des new Stichwort im Konstruktor Ich erhalte die folgenden Referenzfehler:

5 713568 error EXCEPTION: Error in ./HomePage class HomePage_Host - inline template:0:0 caused by: AnyJS is not defined 6 713570 error ORIGINAL EXCEPTION: AnyJS is not defined 8 713575 error ReferenceError: AnyJS is not defined

Die ionische Version Ich verwende:

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 

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

} 

Und hier ist meine AnyJS-Datei :

function AnyJS(){} 

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

Hinweis: AnyJS Datei enthält ein Objekt mit einigen Eigenschaften und Methoden, die nicht mit den neuesten Standards ES6 aber schlicht JS Methoden entsprechen. Ich muss ein Objekt erstellen und die Methoden direkt von meinem home.ts aufrufen.

Answer 1

Ändern Sie Ihre AnyJs so etwas wie diese Datei:

export class AnyJs { 

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

} 

Dann in Ihrer home.ts Datei importieren es:

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

} 

Nun, wenn Ihr AnyJs Datei ein ES6 ist Datei, die Sie diese Möglichkeiten:

Deklarieren Sie ein Modul und exportieren Sie die zu verwendende Klasse:

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

Oder Deklarieren Funktion als Modul

export default function() { ... }; 


import myFunc from 'AnyJs'; 
myFunc();