У меня есть файл JavaScript с именем abc.js
, который имеет "публичную" функцию под названием xyz()
. Я хочу вызвать эту функцию в моем проекте Angular. Как мне это сделать?
Как включить файл сценария JavaScript в Angular и вызвать функцию из этого сценария?
Ответ 1
Обратитесь к скриптам внутри файла angular-cli.json
.
"scripts": [
"../path"
];
затем добавьте typings.d.ts
declare var variableName:any;
Импортируйте его в свой файл как
import * as variable from 'variableName';
Ответ 2
Чтобы включить глобальную библиотеку, например файл jquery.js в массив скриптов, из angular -cli.json:
"scripts": [
"../node_modules/jquery/dist/jquery.js"
]
После этого перезапустите ng, если он уже запущен.
Ответ 3
Вы можете либо
import * as abc from './abc';
abc.xyz();
или
import { xyz } from './abc';
xyz()
Ответ 4
Добавьте внешний файл js в index.html.
<script src="./assets/vendors/myjs.js"></script>
Вот файл 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||{})
Тогда объявите это в компоненте как ниже
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>
Это работает для меня...
Ответ 5
1) Сначала вставьте путь к файлу JS в файл index.html:
<script src="assets/video.js" type="text/javascript"></script>
2) Импортируйте файл JS и объявите переменную в component.ts:
- import './../../../assets/video.js';
-
объявить var RunPlayer: любой;
** ПРИМЕЧАНИЕ: ** Имя переменной должно совпадать с именем функции в файле js
4) вызов метода js в компоненте
ngAfterViewInit() {
setTimeout(() => {
new RunPlayer();
});
}