Ich werde diese d3gauge.js - Datei in eine meiner angle2-Komponente, memmon.component.ts
-Datei, importieren.
import '../../../../js/d3gauge.js';
export class MemMonComponent {
createMemGauge() {
new drawGauge(this.opt); //drawGauge() is a function inside d3gauge.js
}
}
und in der entsprechenden Vorlagendatei hinzufügen
<script src="../../../../js/d3gauge.js"></script>
Aber es funktioniert nicht, drawGauge
kann nicht gefunden werden.
So,
.ensure
nicht aufgelöst werden kann.Idealerweise benötigen Sie eine .d.ts
-Datei, damit die Typvariablen Linting
funktionieren.
Aber es scheint, dass d3gauge
keinen hat, können Sie die Entwickler fragen und hoffen, dass sie zuhören werden.
Alternativ können Sie dieses spezielle Problem dadurch lösen
declare var drawGauge: any;
import '../../../../js/d3gauge.js';
export class MemMonComponent {
createMemGauge() {
new drawGauge(this.opt); //drawGauge() is a function inside d3gauge.js
}
}
Wenn Sie es in mehreren Dateien verwenden, können Sie eine d3gauage.d.ts
-Datei mit dem folgenden Inhalt erstellen
declare var drawGauge: any;
und verweisen Sie darauf in Ihrer boot.ts
(bootstrap) -Datei oben
///<reference path="../path/to/d3gauage.d.ts"/>
Nachdem ich viel Zeit damit verschwendet hatte, seine Lösung zu finden, ich habe eine gefundenFür Ihre Bequemlichkeit habe ich den vollständigen Code verwendet, mit dem Sie Ihre gesamte Datei ersetzen können.
Dies ist eine allgemeine Antwort. Angenommen, Sie möchten eine Datei mit dem Namen "testjs.js" in Ihre Komponente "angle 2" importieren. __ Erstellen Sie "testjs.js" in Ihrem Ordner "Assets":
assets> testjs.js
function test(){
alert('TestingFunction')
}
fügen Sie testjs.js in Ihre index.html ein
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>
In Ihrer app.component.ts-Datei oder in einer beliebigen component.ts-Datei, in der Sie dies aufrufen möchten, deklarieren Sie eine Variable und rufen die Funktion wie folgt auf:
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();
}
}
Zum Schluss testen Sie in Ihrer app.component.html die Funktion
app.component.html
<h1>
<button (click)='f()'>Test</button>
</h1>
Anstatt Ihre js
-Dateierweiterung in index.html
einzuschließen, können Sie auch die .angular-cli-json
-Datei verwenden.
Dies sind die Schritte, die ich befolgt habe, um dies zum Laufen zu bringen.
js
-Datei in assets/js
ein..angular-cli.json
den Dateipfad unter Skripten hinzu: [../app/assets/js/test.js]
js
-Datei verwenden möchten.Deklarieren Sie oben, wo Sie die Dateien importieren möchten
Declare const Test:any;
Danach können Sie auf seine Funktionen zugreifen, zum Beispiel Test.add()
Der folgende Ansatz funktionierte in Angular 5 CLI.
Der Einfachheit halber habe ich eine ähnliche d3gauge.js-Demo verwendet, die von oliverbinns erstellt und bereitgestellt wurde - die Sie auf Github leicht finden können.
Zuerst habe ich einfach einen neuen Ordner mit dem Namen externalJS auf derselben Ebene wie der Ordner assets erstellt. Ich habe dann die 2 folgenden .js-Dateien kopiert.
Ich stellte dann sicher, dass beide verknüpften Direktiven in Haupt index.html deklariert wurden.
<script src="./externalJS/d3.v3.min.js"></script>
<script src="./externalJS/d3gauge.js"></script>
Ich fügte dann einen ähnlichen Code In einer gauge.component.ts -Komponente wie folgt hinzu:
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);
});
}
}
und zum Schluss habe ich einfach ein div in der entsprechenden gauge.component.html hinzugefügt
<div id="gaugeBox"></div>
und voilà! :)
Angenommen, Sie haben eine Datei "xyz.js" unter assets/js in einem Angular -Projekt in Visual-Studio . Der einfachste Weg, diese Datei einzuschließen, besteht darin, sie zu . Angle-cli.json hinzuzufügen
"scripts": [ "assets/js/xyz.js" ],
Sie sollten in der Lage sein, die Funktionalität dieser JS-Datei in Ihren Komponenten- oder .ts-Dateien zu verwenden.
Sie können dies auch versuchen:
import * as drawGauge from '../../../../js/d3gauge.js';
und nur new drawGauge(this.opt);
in Ihrem ts-code. Diese Lösung arbeitet in einem Projekt mit in Laravel eingebetteter Winkelkli, an der ich gerade arbeite. In meinem Fall versuche ich, poliglot
library (Übrigens: sehr gut für Übersetzungen) aus node_modules zu importieren:
import * as Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js';
...
export class Lang
{
constructor() {
this.polyglot = new Polyglot({ locale: 'en' });
...
}
...
}
Diese Lösung ist gut, weil ich muss nicht KOPIEREN alle Dateien von node_modules
:).
Sie können auch auf dieser LISTE nach Möglichkeiten schauen, wie Sie Libs in eckig integrieren können.
Hier ist ein einfacher Weg, wie ich es in meinem Projekt gemacht habe.
nehmen wir an, Sie müssen clipboard.min.js
verwenden. In diesem Beispiel geben wir an, dass in clipboard.min.js
eine Funktion mit dem Namen test2()
vorhanden ist.
um die Funktion test2 () nutzen zu können, benötigen Sie:
clipboard.min.js
in Ihre Komponente.hier sind nur die relevanten Teile aus meinem Projekt (siehe die Kommentare):
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) Fügen Sie zunächst den Pfad der JS-Datei in eine index.html -Datei ein:
<script src="assets/video.js" type="text/javascript"></script>
2) Importieren Sie die JS-Datei und deklarieren Sie die Variable in component.ts :
deklarieren Sie var RunPlayer : any;
HINWEIS: Der Variablenname sollte mit dem Namen einer Funktion in der js-Datei identisch sein
3) Rufen Sie die Methode js in der Komponente auf
ngAfterViewInit(){
setTimeout(() => {
new RunPlayer();
});
}