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

JavaScript Webpack

伽罗

2020-03-23

我将将此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。

第3113篇《Angular 2：将外部js文件导入组件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
梅 2020.03.23

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

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

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

西门 2020.03.23

您可以在文件中包含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()

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android