wake-up-neo.com

Angular2: Importiere eine externe js-Datei in die Komponente

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, drawGaugekann nicht gefunden werden. 

So, 

  1. was sind die richtigen Schritte, um eine externe js-Datei in angle2 zu importieren? 
  2. ist es möglich, Webpack zu verwenden? Ich beziehe mich auf diese Frage , die Webpack-Lösung dort funktioniert für mich nicht, da .ensure nicht aufgelöst werden kann.
48
Bing Lu

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"/>
59
Ankit Singh

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

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.

  1. Fügen Sie zunächst Ihre externe js-Datei in assets/js ein.
  2. Fügen Sie in .angular-cli.json den Dateipfad unter Skripten hinzu: [../app/assets/js/test.js]
  3. In der Komponente, in der Sie die Funktionen der 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()

7
Sitaram

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.

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

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à! :)

 enter image description here

3
PeteZaria

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.

1
Anuj Vohra

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 :).

AKTUALISIEREN

Sie können auch auf dieser LISTE nach Möglichkeiten schauen, wie Sie Libs in eckig integrieren können.

1

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:

  1. machen Sie einen Verweis auf die .js-Datei in Ihrer index.html.
  2. importieren Sie clipboard.min.js in Ihre Komponente.
  3. deklarieren Sie eine Variable, mit der Sie die Funktion aufrufen.

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
    }

}
0
jonathana

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 :

  • import './../../../assets/video.js';
  • 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();
    });

}
0