javascript - angular4 how to call a function in a external js - Stack Overflow

admin管理员组

文章数量:1220500

I have a jscript which displays a log to the console:

x.js contains

function open() {
    console.log('this a function');
}

in index.html of my app

<script src="x.js"></script>

in my component

declare var xJS : any;;

@Component({
   selector: 'employerfile',
   templateUrl: './employerfileponent.html'
})

export class EmployerFileComponent
    .....
    openURL() {
       xJS.open();  
    }
}

in html

<a (click)="openURL()"> click </a>

When I execute this code, I get an exception@

Original exception: xJS is not defined

How can I call this external function?

I have a jscript which displays a log to the console:

x.js contains

function open() {
    console.log('this a function');
}

in index.html of my app

<script src="x.js"></script>

in my component

declare var xJS : any;;

@Component({
   selector: 'employerfile',
   templateUrl: './employerfile.component.html'
})

export class EmployerFileComponent
    .....
    openURL() {
       xJS.open();  
    }
}

in html

<a (click)="openURL()"> click </a>

When I execute this code, I get an exception@

Original exception: xJS is not defined

How can I call this external function?

• javascript
• angular
• function
• external

Share Improve this question Follow edited Sep 26, 2018 at 14:17 Hristo Eftimov 15.7k1414 gold badges5454 silver badges7979 bronze badges asked Jun 19, 2017 at 6:12 FlorenceFlorence 1,72133 gold badges1414 silver badges2323 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 6

Importing your file like this <script src="x.js"></script> will not work.

You have to import it in the following way:

import * as xJS from './x.js';

If it will not work, the alternative way is to use System.import:

declare var System: any; 

System.import('./x.js')
    .then(xJS => {
        xJS.open();
    });

You can check the following SO post.

You have to declare the name of the function you want to use in your angular component, as-

declare var open: any;

This basically tells the compiler that open exists somewhere, which will be then found in your js file.

Also, to use the above method in your component, you will have to use this syntax-

anyCustomMethodName/anyLifeCycleMethod() {
    new open();
}

You should first import it like this:

import * as xJS from 'xJS';

If your x.js file is not on your local machine or hosted on CDN or it is third-party library then you can't import it in above ways. Even System.import is deprecated.

You can add your js file into index.html and call its functions using window global object as we do earlier.

本文标签： javascriptangular4 how to call a function in a external jsStack Overflow