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

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

다음과 같은 자바스크립트 파일이 있습니다.abc.js라고 불리는 '공개' 기능을 가지고 있습니다.xyz()저는 제 Angular 프로젝트에서 그 함수를 부르고 싶습니다.그걸 어떻게 하는 거죠?

내부 스크립트 참조angular-cli.json(angular.json각 6+) 파일을 사용하는 경우.

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

그 다음에 추가합니다.typings.d.ts(이 파일을 만들 위치)src이미 존재하지 않는 경우)

declare var variableName:any;

다음으로 파일로 가져오기

import * as variable from 'variableName';

글로벌 라이브러리를 포함하려면 다음과 같이 하십시오.jquery.js스크립트 배열의 파일angular-cli.json(angular.json각도 6+를 사용하는 경우:

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

이 후, 이미 시작된 서버인 경우 서버를 다시 시작합니다.

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.component.cisco

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

다음을 추가하여 이 문제를 해결했습니다."allowJs": truetsconfig.json 파일의 "compilerOptions" 내에!

스크립트 파일을 가정해 보겠습니다.custom.js다음과 같이 보입니다: -

var utilObj = {
    dummyFunc: () => {
        console.log('Calling dummy function!');
    }
}

스크립트 배열에 Javascript/script 파일을 추가합니다.angular.json파일.

"scripts": [
    "src/custom.js" 
 ],

다음과 같이 보여야 합니다: -

아래 코드 스니펫 추가하기typings.d.ts이 파일이 없는 경우 다음에 파일 만들기src폴더를 누릅니다.

declare var utilObj:any;

변수 이름을 스크립트 파일의 속성과 유사하게 유지합니다.여기서utilObj속성 이름입니다.

이제 이 스크립트/js 파일을 구성 요소 또는 .ts 파일에 직접 사용할 수 있습니다.

구성 요소 파일이나 .ts 파일의 파일을 가져올 필요는 없습니다. 왜냐하면 우리는 이미 스크립트 파일에 대한 타이핑 정의를 제공했기 때문입니다.typings.d.ts파일.

예: -

ngOnInit() {
  console.log('Starting Application!');
  utilObj.dummyFunc();
}

출력: -

바보같이 들릴 수도 있지만, JavaScript 도우미 함수 utils/javaScriptHelperFunction.js를 제대로 내보내고 있다고 생각되는 경우

export function javaScriptFunction() {
   // DO HELPER FUNCTION STUFF
}

위의 답변에서 언급한 대로 확인을 마쳤으면 코드 편집기를 닫고 열기만 하면 됩니다. 토끼 구멍으로 들어가기 전에 간단한 기본 문제 해결부터 시작하십시오.

언급URL : https://stackoverflow.com/questions/44817349/how-do-i-include-a-javascript-script-file-in-angular-and-call-a-function-from-th