Come posso includere un file script JavaScript in Angular e chiamare una funzione da quello script?

Ho un file JavaScript chiamato abc.jsche ha una funzione "pubblica" chiamata xyz(). Voglio chiamare quella funzione nel mio progetto Angular. Come lo faccio?

Fare riferimento agli script all'interno del file angular-cli.json( angular.jsonquando si utilizza angular 6+).

"scripts": [
    "../path" 
 ];

quindi aggiungi typings.d.ts(crea questo file srcse non esiste già)

declare var variableName:any;

Importalo nel tuo file come

import * as variable from 'variableName';

Per includere una libreria globale, ad esempio un jquery.jsfile nell'array degli script da angular-cli.json( angular.jsonquando si utilizza angular 6+):

"scripts": [
  "../node_modules/jquery/dist/jquery.js"
]

Dopodiché, riavvia ng serve se è già avviato.

Aggiungi il file js esterno in index.html .

<script src="./assets/vendors/myjs.js"></script>

Ecco il file myjs.js :

var myExtObject = (function() {

    return {
      func1: function() {
        alert('function 1 called');
      },
      func2: function() {
        alert('function 2 called');
      }
    }

})(myExtObject||{})


var webGlObject = (function() { 
    return { 
      init: function() { 
        alert('webGlObject initialized');
      } 
    } 
})(webGlObject||{})

Quindi dichiara che è in un componente come di seguito

demo.component.ts

declare var myExtObject: any;
declare var webGlObject: any;

constructor(){
    webGlObject.init();
}

callFunction1() {
    myExtObject.func1();
}

callFunction2() {
    myExtObject.func2();
}

demo.component.html

<div>
    <p>click below buttons for function call</p>
    <button (click)="callFunction1()">Call Function 1</button>
    <button (click)="callFunction2()">Call Function 2</button>
</div>

Sta funzionando per me ...

Puoi anche tu

import * as abc from './abc';
abc.xyz();

o

import { xyz } from './abc';
xyz()