Angular2: importa il file js esterno nel componente

Importerà questo file d3gauge.js in uno dei miei componenti memmon.component.ts , memmon.component.ts .

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

e nel file modello corrispondente, aggiungere

  

Ma non funziona, drawGauge non può essere trovato.

Così,

  1. quali sono i passaggi corretti per importare un file js esterno su angular2?
  2. dal momento che sto usando il webpack, è ansible farlo nel webpack? Mi riferisco a questa domanda , la soluzione del webpack non funziona per me in quanto il risultato non può essere risolto.

Idealmente è necessario avere il file .d.ts per le tipizzazioni per consentire a Linting funzionare.

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


In alternativa, puoi risolvere questo problema specifico facendo ciò

 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, è ansible creare un file d3gauage.d.ts con il contenuto seguente

 declare var drawGauge: any; 

e facendolo riferimento nel file boot.ts (bootstrap) in alto, in questo modo

 /// 

Dopo aver perso un sacco di tempo nel trovare la soluzione, ne 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 textjs.js nel tuo componente angular 2. Crea textjs.js nella tua cartella delle risorse:

asset> textjs.js

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

includi textjs.js nel tuo index.html

index.html

     Project1       Loading...   

Nel tuo app.component.ts o in qualsiasi file component.ts in cui desideri chiamare questo js, ​​dichiara una variabile e chiama la funzione come 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 tuo app.component.html prova la funzione

app.component.html

 

Invece di includere l’estensione del file js in index.html , puoi includere nel file .angular-cli-json .

Questi sono i passi che ho seguito per farlo funzionare.

  1. Innanzitutto includi il tuo file js esterno in assets/js
  2. In .angular-cli.json – aggiungi il percorso del file sotto gli script: [../app/assets/js/test.js]
  3. Nel componente in cui si desidera utilizzare le funzioni del file js .

Dichiarare nella parte superiore in cui si desidera importare i file come

 Declare const Test:any; 

Dopo questo è ansible accedere alle sue funzioni come ad esempio Test.add()

Il seguente approccio ha funzionato in Angular 5 CLI.

Per semplicità, ho usato una demo d3gauge.js simile creata e fornita da oliverbinns, che puoi facilmente trovare su Github.

Quindi, per prima cosa, ho semplicemente creato una nuova cartella denominata externalJS allo stesso livello della cartella assets . Ho quindi copiato i 2 seguenti file .js.

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

Mi sono quindi assicurato di dichiarare entrambe le direttive collegate nel index.html principale

   

Ho quindi aggiunto un codice simile in un componente gauge.component.ts 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 nel corrispondente gauge.component.html

 

et voilà ! 🙂

inserisci la descrizione dell'immagine qui

Ecco un modo semplice per farlo nel mio progetto.

diciamo che è necessario utilizzare clipboard.min.js e per il gusto dell’esempio, diciamo che all’interno di clipboard.min.js esiste una funzione chiamata test2() .

per utilizzare la funzione test2 () è necessario:

  1. fai riferimento al file .js all’interno di index.html.
  2. importa clipboard.min.js al tuo componente.
  3. dichiara una variabile che ti utilizzerà per chiamare la funzione.

qui ci sono solo le parti rilevanti del mio progetto (vedi i commenti):

index.html:

    Angular QuickStart               Loading AppComponent content here ...   

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

Puoi anche provare questo:

 import * as drawGauge from '../../../../js/d3gauge.js'; 

e solo new drawGauge(this.opt); nel tuo codice ts. Questa soluzione funziona in progetto con angular-cli incorporato in laravel su cui sto lavorando attualmente. Nel mio caso provo ad importare la libreria poliglot (btw: molto buona per le traduzioni) da node_modules:

 import * as Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js'; ... export class Lang { constructor() { this.polyglot = new Polyglot({ locale: 'en' }); ... } ... } 

Questa soluzione è buona perché non ho bisogno di node_modules alcun file da node_modules :).

AGGIORNARE

Puoi anche consultare questo ELENCO su come includere le librerie in angular.