Angular 2：外部jsファイルをコンポーネントにインポートする
この d3gauge.js ファイルを私のangular2コンポーネントの1つ、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が見つかりません。
そう、
- 外部jsファイルをangular2にインポートするための正しい手順は何ですか？
- 私はwebpackを使っているので、webpackでそれをすることは可能ですか？私はこれを参照しています question 、
.ensureの結果としてそこにあるウェブパックの解決策は解決できません.
理想的には、Lintingを機能させるためには、タイピング用の.d.tsファイルが必要です。
しかし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（bootstrap）ファイルでそれを参照してください。
///<reference path="../path/to/d3gauage.d.ts"/>
その解決策を見つけるのに多くの時間を浪費した後、私は1つを見つけました。あなたの便宜のために私はあなたがあなたのファイル全体を置き換えることができるという完全なコードを使いました。
これは一般的な答えです。 testjs.jsという名前のファイルをAngular 2コンポーネントにインポートしたいとしましょう。アセットフォルダーにtestjs.jsを作成します。
assets> 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>
あなたのapp.component.tsまたはあなたがこのjsを呼びたい任意の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ファイルに含めることができます。
これらは私がこれを機能させるために従ったステップです。
- まず
assets/jsに外部の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
それから、両方のリンクされたディレクティブをmain 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>
etvoilà！ :)
これが私のプロジェクトでやった簡単な方法です。
clipboard.min.jsを使う必要があるとしましょう、そして例のためにclipboard.min.jsの中にtest2()と呼ばれる関数があるとしましょう。
test2（）関数を使うためには、あなたが必要とします：
- index.html内の.jsファイルへの参照を作成します。
- コンポーネントに
clipboard.min.jsをインポートします。 - 関数を呼び出すためにあなたを使う変数を宣言してください。
ここに私のプロジェクトからの関連部分だけがある（コメントを見なさい）：
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
}
}
1）まずJSファイルのパスをindex.htmlファイルに挿入します。
<script src="assets/video.js" type="text/javascript"></script>
2）JSファイルをインポートし、component.tsで変数を宣言します。
- './../../../assets/video.js'をインポートしてください。
var RunPlayer：anyを宣言します。
注：変数名はjsファイルの関数名と同じでなければなりません
3）コンポーネント内のjsメソッドを呼び出す
ngAfterViewInit(){
setTimeout(() => {
new RunPlayer();
});
}
これも試すことができます。
import * as drawGauge from '../../../../js/d3gauge.js';
そしてあなたのts-codeの中だけでnew drawGauge(this.opt);。このソリューションは私が現在取り組んでいるlaravelに組み込まれたangular-cliを使ってプロジェクトで動作します。私の場合、私はnode_modulesからpoliglotライブラリをインポートしようとしています。
import * as Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js';
...
export class Lang
{
constructor() {
this.polyglot = new Polyglot({ locale: 'en' });
...
}
...
}
Iはnode_modules :)からのファイルをCOPYする必要がないため、この解決策は有効です。
更新
また、libに角度を含める方法についての このLIST もご覧ください。