라는 abc.js
‘공용’함수 가있는 JavaScript 파일 이 있습니다 xyz()
. 내 Angular 프로젝트에서 해당 함수를 호출하고 싶습니다. 어떻게하나요?
답변
angular-cli.json
( angular.json
angular 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"
]
그런 다음 이미 시작된 경우 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()