2016-05-06 11 views
33

Ich werde diese d3gauge.js Datei in eine meiner angular2 Komponente, memmon.component.ts Datei importieren.Angular2: externe js-Datei in Komponente importieren

import '../../../../js/d3gauge.js'; 
export class MemMonComponent { 
    createMemGauge() { 
     new drawGauge(this.opt); //drawGauge() is a function inside d3gauge.js 
    } 
} 

und in der Vorlagendatei entsprechen, fügen

<script src="../../../../js/d3gauge.js"></script> 

Aber es funktioniert nicht, drawGauge nicht gefunden werden kann.

So

  1. was machen richtige Schritte eine externe JS-Datei angular2 zu importieren?
  2. seit ich webpack benutze, ist es möglich, es in webpack zu tun? Ich beziehe mich auf diese question, die Webpack-Lösung dort funktioniert nicht für mich als Ergebnis .ensure kann nicht gelöst werden.
+2

müssen Sie erstellen oder importieren Typisierungen (* .d .ts) für die Datei. – ps2goat

Antwort

42

Im Idealfall müssen Sie .d.ts Datei haben für Typisierungen Linting arbeiten lassen.

Aber es scheint, dass d3gauge keine hat, können Sie die Entwickler bitten und hoffen, sie werden zuhören.


Alternativ können Sie dieses spezifische Problem, indem Sie lösen können diese

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 mehrere Dateien verwenden, können Sie eine d3gauage.d.ts Datei mit dem Inhalt unter

declare var drawGauge: any; 
erstellen

und verweisen Sie auf Ihre boot.ts (Bootstrap) -Datei am t op, wie diese

///<reference path="../path/to/d3gauage.d.ts"/> 
+0

Danke. Eine weitere Frage, wann wird das 'decide var drawGauge: any;' referenziert, im Moment der Übertragung dieser ts-Datei? Oder, anders ausgedrückt, wenn 'new drawGauge (this.opt)', wie weiß der Compiler, dass 'drawGauge()' sich tatsächlich in 'd3gauge.js' befindet? –

+0

Ja, bei transpile muss es wissen, dass es etwas gibt, das "d3gauge" heißt. In der zweiten Frage ist dies nicht der Fall, "d3gauge.js" weist es einer "globalen" Variablen im "dom" zu und das heißt, von wo aus es zur Laufzeit aufgerufen wird. –

+0

Ich habe 'ReferenceError: drawGauge ist nicht definiert'. Liegt es daran, dass ich Webpack benutze? –

21

Nach viel Zeit verschwenden ihre Lösung zu finden, Ich habe ein gefunden. Zu Ihrer Bequemlichkeit habe ich den vollständigen Code verwendet, mit dem Sie Ihre gesamte Datei ersetzen können.

Dies ist eine allgemeine Antwort. Nehmen wir an, Sie möchten eine Datei namens testjs.js in Ihre eckige 2-Komponente importieren. erstellen testjs.js in Ihr Vermögen Ordner:

Vermögen> testjs.js

function test(){ 
    alert('TestingFunction') 
} 

testjs.js in Ihrer index.html

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> 
umfassen

In Ihrer app.component.ts oder in einer beliebigen Komponente.ts-Datei, wo Sie diese anrufen möchten js eine Variable deklarieren und rufen Sie die Funktion wie folgt:

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

schließlich in Ihrem app.component.html Test die Funktion

app.component.html

<h1> 
    <button (click)='f()'>Test</button> 
</h1> 
+3

Dies ist die Antwort, die ich suche. Vielen Dank, können Sie einfach teilen, warum wir hier "neu" brauchen? – habibalsaki

1

Der folgende Ansatz funktionierte in Angular 5 CLI.

Der Einfachheit halber habe ich ähnliche d3gauge.js-Demo verwendet, die von oliverbinns erstellt und zur Verfügung gestellt wurde - die Sie leicht auf Github finden können.

Also zuerst, habe ich einfach einen neuen Ordner externalJS auf gleicher Höhe wie die OrdnerVermögenswerte genannt. Ich kopierte dann die 2 folgenden .js-Dateien.

  • d3.v3.min.js
  • d3gauge.js

habe ich dann sicher

<script src="./externalJS/d3.v3.min.js"></script> 
<script src="./externalJS/d3gauge.js"></script> 

beide verknüpften Richtlinien in Haupt index.html zu erklären Ich fügte dann einen ähnlichen Code in einem Messgerät hinzu .component.ts Komponente wie folgt:

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 schließlich, habe ich einfach ein div gauge.component.html

<div id="gaugeBox"></div> 

et voilà in entsprechenden! :)

enter image description here

0

Statt Ihre js Dateierweiterung in index.html von einschließlich, können Sie in .angular-cli-json Datei enthalten.

Dies sind die Schritte, die ich befolgt habe, um das zu erreichen.

  1. Zuerst sind Ihre externe js Datei in assets/js
  2. In .angular-cli.json - den Dateipfad unter Skripts hinzufügen: [../app/assets/js/test.js]
  3. In der Komponente in dem Sie die Funktionen der js-Datei verwenden möchten.

Declare an der Spitze, wo Sie die Dateien als

Declare const Test:any; 

Danach importieren möchten Sie Funktionen wie zum Beispiel Zugriff auf Test.add()

Verwandte Themen