Comment inclure un fichier js externe dans Angular 4 et appeler une fonction d'Angular vers js ?

Question

Disons que j'ai un fichier nommé abc.js qui a une fonction xyz() . Je veux appeler cette fonction dans mon projet Angular 4. Comment dois-je m'y prendre ?

Answer 1

Référez-vous aux scripts à l'intérieur du angular-cli.json fichier.

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

puis ajouter typings.d.ts

declare var variableName:any;

Importez-le dans votre fichier en tant que

import * as variable from 'variableName';

Answer 2

Afin d'inclure une bibliothèque globale, par exemple le fichier jquery.js dans le tableau des scripts de angular-cli.json :

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

Après cela, redémarrez ng serve s'il est déjà lancé.

Answer 3

Ajouter le fichier js externe dans index.html .

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

Voici monjs.js fichier :

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

Ensuite, déclarez-le dans le composant comme ci-dessous

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>

Ça marche pour moi...

Answer 4

Vous pouvez soit

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

ou

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