Angular2：將外部js文件導入到組件

我打算將此d3gauge.js文件導入到我的angular2組件之一memmon.component.ts文件中。Angular2：將外部js文件導入到組件

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

，並在相應的模板文件，添加

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

但它不工作，drawGauge無法找到。

所以，

幹嘛正確的步驟來導入外部的js文件angular2？
因爲我使用的是webpack，是否有可能在webpack中做到這一點？我指的是這個question，那裏的webpack解決方案不適合我，因爲.ensure無法解決。

來源

2016-05-06 Bing Lu

或進口分型（* .D .ts）爲文件。 – ps2goat

理想情況下，你需要有.d.ts文件分型，讓Linting工作。

但似乎d3gauge沒有一個，你可以要求開發者提供，並希望他們會聽。

或者，您也可以通過這樣

declare var drawGauge: any; 

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

如果您在多個文件中使用它解決這一具體問題，您可以創建一個d3gauage.d.ts文件下面

declare var drawGauge: any;

內容

並在您的boot.ts（bootstrap）文件中引用它在t運算，這樣

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

來源

2016-05-07 04:39:15

謝謝。還有一個問題，在傳輸ts文件的時候，'declare var drawGauge：any;'會被引用嗎？或者換句話說，當'new drawGauge（this.opt）'時，編譯器如何知道'drawGauge（）'實際上在'd3gauge.js'中？ –

是的，在transpile上，它必須知道有/將會有一個名爲'd3gauge'的東西。在第二個問題中，'d3gauge.js'不會將'dom'中的'global'變量賦值給它，而是從運行時調用它的地方開始。 –

我得到了'ReferenceError：drawGauge沒有定義'。是因爲我在使用webpack嗎？ –

在尋找其解決方案，我發現一個浪費了大量的時間之後。爲了您的方便，我使用了可以替換整個文件的完整代碼。

這是一個普遍的答案。假設您想要將名爲testjs.js的文件導入到您的angular 2組件中。在您的資產文件夾中創建testjs.js：

資產> testjs.js

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

包括testjs.js在您的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>

在你的app.component.ts或任何組件中。要調用這個TS文件的js聲明一個變量，調用函數如下圖所示：

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

最後在app.component.html測試功能

app.component.html

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

來源

2017-06-18 15:48:42

這是我正在尋找的答案。非常感謝，你能分享一下爲什麼我們需要'新'嗎？ – habibalsaki

以下方法適用於Angular 5 CLI。

爲了簡單起見，我使用了oliverbinns創建和提供的類似d3gauge.js演示 - 您可以在Github上輕鬆找到它。

因此，首先，我簡單地創建了一個名爲externalJS在同一水平資產文件夾一個新的文件夾。然後我複製了以下2個.js文件。

d3.v3.min.js
d3gauge.js

然後我確信在主的index.html申報首尾相連指令

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

然後我在表中增加了一個類似的代碼 .component.ts組分如下：

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

}

最後，我只需在對應gauge.component.html

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

等瞧加入一個div！ :)而是包括index.html您js文件擴展名的

來源

2017-12-18 18:05:26 PeteZaria

，您可以在.angular-cli-json文件。

這些是我遵循的步驟來得到這個工作。

首先包括您的外部js文件assets/js
在.angular-cli.json - 添加的文件路徑下的腳本： [../app/assets/js/test.js]
在組件要使用js文件的功能。在頂部

申報要導入的文件作爲

Declare const Test:any;

這之後，您可以訪問它的函數，例如Test.add()您需要創建

來源

2018-02-09 12:22:15 Sitaram

Angular2：將外部js文件導入到組件

回答

相關問題