Disons que j'ai un fichier nommé abc.js
qui a une fonction xyz()
. Je souhaite appeler cette fonction dans mon projet Angular 4. Comment devrais-je faire ça?
Reportez-vous aux scripts du fichier angular-cli.json
.
"scripts": [
"../path"
];
puis ajoutez dans typings.d.ts
declare var variableName:any;
Importez-le dans votre fichier en tant que
import * as variable from 'variableName';
Pour inclure une bibliothèque globale, par exemple un fichier jquery.js dans le tableau de scripts d'angular-cli.json:
"scripts": [
"../node_modules/jquery/dist/jquery.js"
]
Après cela, redémarrez serve s'il est déjà démarré.
Tu peux soit
import * as abc from './abc';
abc.xyz();
ou
import { xyz } from './abc';
xyz()
Ajouter un fichier js externe dans index.html.
<script src="./assets/vendors/myjs.js"></script>
Voici le fichier 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||{})
Puis déclarer qu'il est en 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 ...