Angular2 : 외부 js 파일을 구성 요소로 가져 오기
이 d3gauge.js 파일을 angular2 구성 요소 중 하나 인 파일로 가져 오 겠습니다memmon.component.ts .
import '../../../../js/d3gauge.js';
export class MemMonComponent {
createMemGauge() {
new drawGauge(this.opt); //drawGauge() is a function inside d3gauge.js
}
}
해당 템플릿 파일에서
<script src="../../../../js/d3gauge.js"></script>
하지만 작동하지 않고 drawGauge찾을 수 없습니다.
그래서,
- angular2로 외부 js 파일을 가져 오는 올바른 단계는 무엇입니까?
- webpack을 사용하고 있기 때문에 webpack에서 할 수 있습니까? 이 질문을 참조 하면 webpack 솔루션이 작동하지 않아
.ensure해결할 수 없습니다.
이상적으로 .d.ts는 Linting작업 할 수 있도록 입력 할 파일 이 있어야 합니다 .
그러나 d3gauge하나가없는 것 같습니다 . 개발자에게 제공을 요청하고 그들이들을 수 있기를 바랍니다.
또는 다음을 수행하여이 특정 문제를 해결할 수 있습니다.
declare var drawGauge: any;
import '../../../../js/d3gauge.js';
export class MemMonComponent {
createMemGauge() {
new drawGauge(this.opt); //drawGauge() is a function inside d3gauge.js
}
}
여러 파일에서 사용하는 경우 d3gauage.d.ts아래 내용 으로 파일을 생성 할 수 있습니다.
declare var drawGauge: any;
다음과 boot.ts같이 상단 의 (부트 스트랩) 파일에서 참조하십시오.
///<reference path="../path/to/d3gauage.d.ts"/>
자사의 솔루션을 찾는데 많은 시간을 낭비 후, 나는 하나를 발견했습니다 . 편의를 위해 전체 파일을 대체 할 수있는 완전한 코드를 사용했습니다.
이것은 일반적인 대답입니다. testjs.js라는 파일을 각도 2 구성 요소로 가져오고 싶다고 가정 해 보겠습니다. 자산 폴더에 testjs.js를 만듭니다.
자산> testjs.js
function test(){
alert('TestingFunction')
}
index.html에 testjs.js 포함
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Project1</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="./assets/testjs.js"></script>
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
이 js를 호출하려는 app.component.ts 또는 component.ts 파일에서 변수를 선언하고 아래와 같이 함수를 호출합니다.
app.component.ts
import { Component } from '@angular/core';
declare var test: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
f(){
new test();
}
}
마지막으로 app.component.html 에서 함수를 테스트하십시오.
app.component.html
<h1>
<button (click)='f()'>Test</button>
</h1>
에 js파일 확장자 를 포함하는 대신 파일 에 포함 index.html할 수 있습니다 .angular-cli-json.
이 작업을 수행하기 위해 수행 한 단계는 다음과 같습니다.
- 먼저 외부
js파일을assets/js - 에서
.angular-cli.json-스크립트 아래에 파일 경로 추가 :[../app/assets/js/test.js] js파일 의 기능을 사용하려는 구성 요소에서 .
파일을 가져올 위치를 맨 위에 선언하십시오.
declare const Test:any;
이 후 예를 들어 기능에 액세스 할 수 있습니다. Test.add()
다음 접근 방식은 Angular 5 CLI에서 작동했습니다.
단순함을 위해 oliverbinns에서 만들고 제공 한 유사한 d3gauge.js 데모를 사용했습니다.이 데모는 Github에서 쉽게 찾을 수 있습니다.
그래서 먼저 애셋 폴더 와 같은 레벨에 externalJS 라는 새 폴더를 만들었습니다 . 그런 다음 다음 2 개의 .js 파일을 복사했습니다.
- d3.v3.min.js
- d3gauge.js
그런 다음 기본 index.html 에서 연결된 두 지시문을 모두 선언했습니다.
<script src="./externalJS/d3.v3.min.js"></script>
<script src="./externalJS/d3gauge.js"></script>
그런 다음 다음과 같이 gauge.component.ts 구성 요소 에 유사한 코드를 추가했습니다 .
import { Component, OnInit } from '@angular/core';
declare var d3gauge:any; <----- !
declare var drawGauge: any; <-----!
@Component({
selector: 'app-gauge',
templateUrl: './gauge.component.html'
})
export class GaugeComponent implements OnInit {
constructor() { }
ngOnInit() {
this.createD3Gauge();
}
createD3Gauge() {
let gauges = []
document.addEventListener("DOMContentLoaded", function (event) {
let opt = {
gaugeRadius: 160,
minVal: 0,
maxVal: 100,
needleVal: Math.round(30),
tickSpaceMinVal: 1,
tickSpaceMajVal: 10,
divID: "gaugeBox",
gaugeUnits: "%"
}
gauges[0] = new drawGauge(opt);
});
}
}
마지막으로 해당 gauge.component.html에 div를 추가했습니다.
<div id="gaugeBox"></div>
et voilà! :)
다음은 프로젝트에서 수행 한 간단한 방법입니다.
당신이 사용할 필요가 말할 수 clipboard.min.js및 예제를 위해 내부에 있다고 할 수 있습니다 clipboard.min.js기능이있다라는 것을 test2().
test2 () 함수를 사용하려면 다음이 필요합니다.
- index.html 내부의 .js 파일을 참조하십시오.
clipboard.min.js구성 요소로 가져옵니다 .- declare a variable that will use you to call the function.
here are only the relevant parts from my project (see the comments):
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<base href="/src/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function (err) { console.error(err); });
</script>
<!-- ************ HERE IS THE REFERENCE TO clipboard.min.js -->
<script src="app/txtzone/clipboard.min.js"></script>
</head>
<body>
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html>
app.component.ts:
import '../txtzone/clipboard.min.js';
declare var test2: any; // variable as the name of the function inside clipboard.min.js
@Component({
selector: 'txt-zone',
templateUrl: 'app/txtzone/Txtzone.component.html',
styleUrls: ['app/txtzone/TxtZone.css'],
})
export class TxtZoneComponent implements AfterViewInit {
// call test2
callTest2()
{
new test2(); // the javascript function will execute
}
}
You can also try this:
import * as drawGauge from '../../../../js/d3gauge.js';
and just new drawGauge(this.opt); in your ts-code. This solution works in project with angular-cli embedded into laravel on which I currently working on. In my case I try to import poliglot library (btw: very good for translations) from node_modules:
import * as Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js';
...
export class Lang
{
constructor() {
this.polyglot = new Polyglot({ locale: 'en' });
...
}
...
}
This solution is good because i don't need to COPY any files from node_modules :) .
UPDATE
You can also look on this LIST of ways how to include libs in angular.
1) First Insert JS file path in an index.html file :
<script src="assets/video.js" type="text/javascript"></script>
2) Import JS file and declare the variable in component.ts :
- import './../../../assets/video.js';
var RunPlayer 선언 : any;
참고 : 변수 이름은 js 파일의 함수 이름과 동일해야합니다.
3) 구성 요소에서 js 메서드 호출
ngAfterViewInit(){
setTimeout(() => {
new RunPlayer();
});
}
Visual-Studio의 일부 Angular 프로젝트에서 assets / js 폴더 아래에 "xyz.js"파일을 추가했다고 가정 해 보겠습니다.이 파일 을 포함하는 가장 쉬운 방법은 .angular-cli.json에 추가하는 것입니다.
"scripts": [ "assets/js/xyz.js" ],
구성 요소 또는 .ts 파일에서이 JS 파일의 기능을 사용할 수 있어야합니다.
참조 URL : https://stackoverflow.com/questions/37081943/angular2-import-external-js-file-into-component
'IT Share you' 카테고리의 다른 글
| Google Cloud 프로젝트 소유권을 이전하는 방법은 무엇입니까? (0) | 2021.01.06 |
|---|---|
| Xcode에서 개발 언어 변경 (0) | 2021.01.06 |
| Top 1 필드를 선택하고 지역 변수에 할당 (0) | 2020.12.15 |
| Visual Studio Code에서 솔루션 파일을 열 수 없습니다. (0) | 2020.12.15 |
| 리스너가 람다로 대체 될 수 있다는 것은 무엇을 의미합니까? (0) | 2020.12.15 |