Как включить файл сценария JavaScript в Angular и вызвать функцию из этого сценария?

У меня есть файл JavaScript с именем abc.js, который имеет "публичную" функцию под названием xyz(). Я хочу вызвать эту функцию в моем проекте 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();
});

}