javascript - Angular2:将外部js文件导入组件




3 Answers

在浪费了大量时间寻找解决方案之后, 我找到了一个 。 为方便起见,我使用了可以替换整个文件的完整代码。

这是一般答案。 假设您要将名为testjs.js的文件导入角度2组件。 在assets文件夹中创建testjs.js:

assets> testjs.js

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

在index.html中包含testjs.js

的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或你要调用的任何component.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>
javascript angular webpack

我要将这个d3gauge.js文件导入到我的angular2组件memmon.component.ts文件中。

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无法找到。

所以,

  1. 将外部js文件导入angular2的正确步骤是什么?
  2. 因为我正在使用webpack,是否可以在webpack中进行? 我指的是这个question ,webpack解决方案对我来说不起作用,因为.ensure无法解决。



以下方法适用于Angular 5 CLI。

为了简单起见,我使用了由oliverbinns创建和提供的类似d3gauge.js演示 - 您可以在Github上轻松找到它。

首先,我只是在与assets文件夹相同的级别上创建了一个名为externalJS的新文件夹。 然后我复制了以下两个.js文件。

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

然后我确保在主index.html中声明两个链接指令

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

然后我在gau.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

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

etvoilà! :)




你也可以试试这个:

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

new drawGauge(this.opt); 在您的ts代码中。 这个解决方案适用于项目,其中angular-cli嵌入到我目前正在研究的laravel中。 在我的情况下,我尝试从poliglot导入poliglot库(btw:非常适合翻译):

import * as Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js';
...
export class Lang 
{
    constructor() {

        this.polyglot = new Polyglot({ locale: 'en' });
        ...
    }
    ...
}

这个解决方案很好,因为我不需要复制 node_modules :)中的任何文件。

UPDATE

您还可以查看如何在角度中包含库的方法列表 。






Related