Angular2: importa il file js esterno nel componente

Importerò questo file d3gauge.js in uno dei miei componenti angular2, memmon.component.ts.Angular2: importa il file js esterno nel componente

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

e nel file di modello corrispondente, aggiungere

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

Ma non funziona, drawGauge non può essere trovato.

Quindi,

Che cosa passaggi corretti per importare un file js esterno per angular2?
da quando utilizzo il webpack, è possibile farlo nel webpack? Mi riferisco a questo question, la soluzione di webpack che non funziona per me in seguito a .ensure non può essere risolta.

fonte

2016-05-06 Bing Lu

è necessario creare o tipizzazioni di importazione (* .d .ts) per il file. – ps2goat

Idealmente è necessario avere .d.ts programma per tipizzazioni di lasciare Linting lavoro.

Ma sembra che lo d3gauge non ne abbia uno, puoi chiedere agli sviluppatori di fornire e sperare che ascolteranno.

In alternativa, si può risolvere questo problema specifico in questo modo

declare var drawGauge: any; 

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

Se lo si utilizza in più file, è possibile creare un file d3gauage.d.ts con il contenuto sotto

declare var drawGauge: any;

e fare riferimento nel file boot.ts (bootstrap) alla t op, come questo

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

fonte

2016-05-07 04:39:15

Grazie. Ancora una domanda, quando si farà riferimento al file 'declare var drawGauge: any;' al momento di traspare questo file ts? Oppure, mettilo in un altro modo, quando 'new drawGauge (this.opt)', come fa il compilatore a sapere che 'drawGauge()' è in realtà in 'd3gauge.js'? –

Sì, su transpile, deve sapere che c'è/o sarà qualcosa chiamato 'd3gauge'. Nella seconda domanda, no, 'd3gauge.js' lo assegna a una variabile' global' nel 'dom' e cioè da dove viene chiamato su runtime. –

Ho ottenuto l'errore ReferenceError: drawGauge non definito. È perché sto usando il webpack? –

Dopo sprecare un sacco di tempo a trovare la sua soluzione, ho trovato uno. Per tua comodità ho usato il codice completo che puoi sostituire con il tuo intero file.

Questa è una risposta generale. Diciamo che vuoi importare un file chiamato testjs.js nel tuo componente angolare 2. Crea testjs.js nella cartella attivi:

patrimonio> testjs.js

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

includono testjs.js nel vostro 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>

Nel tuo app.component.ts o in qualsiasi componente.file di ts in cui si desidera chiamare questo js dichiarare una variabile e chiamare la funzione come qui di seguito:

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

Infine nel vostro app.component.html prova la funzione

app.component.html

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

fonte

2017-06-18 15:48:42

questa è la risposta che sto cercando. Grazie mille, puoi condividere perché abbiamo bisogno di "nuovo" qui? – habibalsaki

Il seguente approccio ha funzionato nella CLI Angular 5.

Per semplicità ho utilizzato la demo d3gauge.js creata e fornita da oliverbinns, che è possibile trovare facilmente su Github.

Quindi, prima, ho semplicemente creato una nuova cartella denominata externalJS sullo stesso livello delle beni cartella. Ho quindi copiato i 2 seguenti file .js.

d3.v3.min.js
d3gauge.js

ho poi fatto in modo di dichiarare entrambe le direttive legate a principale index.html

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

Ho quindi aggiunto un codice simile in un misuratore .component.ts componente come segue:

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

}

e, infine, ho semplicemente aggiunto un div in corrispondenti gauge.component.html

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

et voilà! :)

fonte

2017-12-18 18:05:26 PeteZaria

Invece di includere l'estensione del file js in index.html, è possibile includere nel .angular-cli-json file.

Questi sono i passaggi che ho seguito per farlo funzionare.

Prima Includi la tua js file esterno in assets/js
In .angular-cli.json - aggiungere il percorso del file in script: [../app/assets/js/test.js]
Nella componente in cui si desidera utilizzare le funzioni del file js.

Declare in alto dove si desidera importare i file come

Declare const Test:any;

Dopo questo si può accedere alle sue funzioni, come ad esempio Test.add()

fonte

2018-02-09 12:22:15 Sitaram

Angular2: importa il file js esterno nel componente

risposta

Problemi correlati