Angular2: Externe js-Datei in Komponente importieren

Werde ich zum importieren dieser d3gauge.js - Datei in einem meiner angular2 Komponente memmon.component.ts - Datei.

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

und in der entsprechenden template-Datei, fügen Sie

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

Aber es funktioniert nicht, drawGaugekann nicht gefunden werden.

So,

was sind richtige Schritte zum importieren einer externen js-Datei zu angular2?
da bin ich mit webpack, ist es möglich, es zu tun im webpack? Ich beziehe mich auf diese Frage , die webpack-Lösung gibt es nicht für mich arbeiten, als Ergebnis der .ensure können nicht aufgelöst werden.

InformationsquelleAutor der Frage Bing Lu | 2016-05-06

49

Im Idealfall müssen Sie haben .d.ts - Datei für Testungen zu lassen Linting Arbeit.

Aber Es scheint, dass d3gauge nicht haben, können Sie Bitten die Entwickler zu bieten und hoffen, Sie werden hören.

Alternativ können Sie lösen dieses Problem dadurch
```
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, können Sie eine d3gauage.d.ts Datei mit dem Inhalt unter
```
declare var drawGauge: any;
```
und verweisen Sie in Ihrem boot.ts (bootstrap-Datei) an der Spitze, wie dieses
```
///<reference path="../path/to/d3gauage.d.ts"/>
```
InformationsquelleAutor der Antwort Ankit Singh

Nach verschwenden viel Zeit bei der Suche nach Ihrer Lösung, ich hab eines gefunden. Für Ihre Bequemlichkeit habe ich die komplette code, den Sie ersetzen können Sie Ihre gesamte Datei mit.

Dies ist eine Allgemeine Antwort. Lassen Sie uns sagen, Sie möchten, importieren Sie eine Datei namens testjs.js in Ihrem eckigen 2-Komponente.
Erstellen testjs.js im Ordner "assets":

assets > testjs.js

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

gehören testjs.js in Ihrem 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>

In Ihrer app.Komponente.ts oder in einer beliebigen Komponente.ts-Datei, wo Sie wollen, rufen Sie diese js deklarieren Sie eine variable, und rufen Sie die Funktion wie folgt:

app.Komponente.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 testen Sie die Funktion

app.component.html

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

InformationsquelleAutor der Antwort Muhammad Rehan Qadri

2

Statt einschließlich Ihrer js - Datei-Erweiterung in index.html können Sie in .angular-cli-json Datei.

Diese sind die Schritte, die ich gefolgt, um dieses zu erhalten zu arbeiten.
1. Zunächst Ihre externe js Datei in assets/js
2. In .angular-cli.json - fügen Sie den Pfad der Datei unter scripts:
  [../app/assets/js/test.js]
3. In der Komponente, wo Sie wollen verwenden Sie die Funktionen des js Datei.
Erklären, an der Spitze, wo Sie wollen, um die Dateien zu importieren, wie
```
Declare const Test:any;
```
Danach können Sie den Zugriff auf Ihre Funktionen, wie zum Beispiel Test.add()

InformationsquelleAutor der Antwort Sitaram

Folgende Ansatz funktioniert in Winkel-5 CLI.

Zur Vereinfachung habe ich ähnliche d3gauge.js demo erstellt und zur Verfügung gestellt von oliverbinns - die können Sie ganz einfach finden Sie auf Github.

Also erstmal, habe ich einfach erstellt einen neuen Ordner mit dem Namen externalJS auf der gleichen Ebene wie die Vermögenswerte Ordner. Kopiere ich dann die 2 folgenden .js-Dateien.

d3.v3.min.js
d3gauge.js

Ich dann sicher, dass Sie erklären, die beide mit Richtlinien in main index.html

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

Fügte ich einen ähnlichen code
in einem Messgerät.Komponente.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, added mich einfach ein div, in den entsprechenden gauge.component.html

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

et voilà ! 🙂

Angular2: Externe js-Datei in Komponente importieren

InformationsquelleAutor der Antwort PeteZaria

Hier ist eine einfache Weise, ich habe es in mein Projekt.

können sagen, Sie müssen verwenden clipboard.min.js
und für den sake des Beispiels können sagen, dass im inneren clipboard.min.js gibt es eine Funktion, genannt test2().

um test2 () - Funktion, die Sie brauchen:

stellen Sie einen Verweis auf die .js-Datei in Sie index.html.
import clipboard.min.js Ihrer Komponente.
deklarieren Sie eine variable ein, verwenden Sie zum Aufruf der Funktion.

hier sind nur die relevanten Teile meines Projektes (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.Komponente.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
    }

}

InformationsquelleAutor der Antwort jonathana

0

Können Sie auch versuchen, diese:
```
import * as drawGauge from '../../../../js/d3gauge.js';
```
und nur new drawGauge(this.opt); in deinen ts-code. Diese Lösung funktioniert in einem Projekt mit Winkel-cli embedded in laravel, auf dem ich gerade arbeiten. In meinem Fall habe ich versucht zu importieren poliglot Bibliothek (btw: sehr gut für übersetzungen) aus node_modules:
```
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 brauchen nicht zu KOPIEREN alle Dateien aus node_modules 🙂 .

InformationsquelleAutor der Antwort Kamil Kiełczewski

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.