我将将此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无法找到。所以，将外部js文件导入angular2的正确步骤是什么？由于我使用的是webpack，是否可以在webpack中进行？我指的是这个问题，由于无法解决，因此webpack解决方案对我不起作用.ensure。
3 回答
动漫人物
TA贡献1815条经验 获得超10个赞
理想情况下，您需要具有.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）文件中引用它，就像这样
///<reference path="../path/to/d3gauage.d.ts"/>
喵喔喔
TA贡献1735条经验 获得超5个赞
在浪费大量时间寻找解决方案之后，我找到了一个。为了方便起见，我使用了完整的代码，可以用它替换整个文件。
这是一个普遍的答案。假设您要将名为testjs.js的文件导入您的angular 2组件。在您的资产文件夹中创建testjs.js：
资产> 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>
在您要调用此js的app.component.ts或任何component.ts文件中，声明一个变量并调用如下函数：
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>
小怪兽爱吃肉
TA贡献1852条经验 获得超1个赞
您可以在文件中包含js扩展名，而不必在中添加文件扩展名。index.html.angular-cli-json
这些是我执行此步骤的步骤：
首先将您的外部js文件包含在assets/js
在.angular-cli.json-在脚本下添加文件路径： [../app/assets/js/test.js]
在要使用js文件功能的组件中。
在顶部将文件导入为声明
declare const Test:any;
之后，您可以访问其功能，例如 Test.add()
添加回答
举报
0/150
提交
取消