Angular에 JavaScript 스크립트 파일을 포함하고 해당 스크립트에서 함수를 호출하려면 어떻게해야합니까?

라는 abc.js'공용'함수 가있는 JavaScript 파일 이 있습니다 xyz(). 내 Angular 프로젝트에서 해당 함수를 호출하고 싶습니다. 어떻게하나요?

angular-cli.json( angular.jsonangular 6+를 사용 하는 경우) 파일 내부의 스크립트를 참조하십시오 .

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

그런 다음 추가하십시오 typings.d.ts( src아직 존재하지 않는 경우이 파일을 작성하십시오 ).

declare var variableName:any;

파일에서 다음으로 가져 오기

import * as variable from 'variableName';

글로벌 라이브러리, 예를 들면 포함하기 위해 jquery.js에서 스크립트 배열의 파일 angular-cli.json( angular.json6 + 각도 사용하는 경우)를 :

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

그런 다음 이미 시작된 경우 ng serve를 다시 시작하십시오.

index.html에 외부 js 파일을 추가합니다 .

<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>

그것은 나를 위해 일하고 있습니다 ...

당신은

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

또는

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