Angular 2:将外部js文件导入组件

我将将此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中进行?我指的是这个问题,由于无法解决,因此webpack解决方案对我不起作用.ensure
2020/03/23 21:57:18

假设您Visual-Studio的某些Angular项目中的assets / js文件夹下添加了一个文件“ xyz.js” ,那么包含该文件的最简单方法是将其添加到.angular-cli.json

"scripts": [ "assets/js/xyz.js" ],

您应该能够在组件或.ts文件中使用此JS文件的功能。

西门2020/03/23 21:57:17

您可以在文件中包含js扩展名,而不必在中添加文件扩展名index.html.angular-cli-json

这些是我执行此步骤的步骤:

  1. 首先将您的外部js文件包含assets/js
  2. .angular-cli.json-在脚本下添加文件路径: [../app/assets/js/test.js]
  3. 在要使用js文件功能的组件中

在顶部将文件导入为声明

declare const Test:any;

之后,您可以访问其功能,例如 Test.add()