我将把这个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无法找到。.ensure无法解析。理想情况下，您需要拥有 .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"/>
declare var drawGauge: any; 什么时候被引用，在转译这个ts文件的时候吗？或者换一种说法，当 new drawGauge(this.opt) 时，编译器如何知道 drawGauge() 实际上在 d3gauge.js 中？ - Bing Lud3gauge的东西存在或将要存在。在第二个问题中，它不需要，因为d3gauge.js将其分配给dom中的一个global变量，这就是运行时它被调用的地方。 - Ankit SinghReferenceError: drawGauge is not defined。这是因为我使用了webpack吗？ - Bing Lu<script src="../../../../js/d3gauge.js"></script>放置在您的index.html文件中，无需在其他任何地方添加。Webpack解决方案可能由于错误路径而无法工作，但我对webpack一无所知。 - Ankit SinghEXCEPTION: Uncaught (in promise): Error: Error in someComponent 的错误提示，说声明的变量未定义，到目前为止还没有找到解决方案。 - Mr.Moe在花费很多时间寻找解决方案后，我找到了一个。为了方便起见，我使用了完整的代码，你可以用它来替换你整个文件。
这是一个通用的答案。假设你想将名为testjs.js的文件导入到你的Angular 2组件中。请在你的assets文件夹中创建testjs.js：
assets > testjs.js
function test(){
alert('TestingFunction')
}
<!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
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>
可以将你的js文件扩展名添加到.angular-cli-json文件中，而不是在index.html中包含它。
以下是我遵循的步骤:
js文件包含在assets/js中.angular-cli.json中 - 在scripts下添加文件路径:
[../app/assets/js/test.js]js文件的函数的组件中。在您要导入文件的位置的顶部声明
declare const Test:any;
之后，您可以像这样访问其函数：Test.add()
declare not Declare - Jnr我随后确保在主要的index.html文件中声明了这两个链接指令。
<script src="./externalJS/d3.v3.min.js"></script>
<script src="./externalJS/d3gauge.js"></script>
然后我在 gauge.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>
et voilà！:)
这是我在项目中使用的一种简单方法。
假设您需要使用 clipboard.min.js，并且为了举例，让我们假设在 clipboard.min.js 中有一个名为 test2() 的函数。
为了使用 test2() 函数，您需要：
clipboard.min.js 导入到您的组件中。以下仅是我项目中相关部分（请参见注释）：
index.html：
<!DOCTYPE html>
<html>
<head>
<title>Angular QuickStart</title>
<base href="/src/">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('main.js').catch(function (err) { console.error(err); });
</script>
<!-- ************ HERE IS THE REFERENCE TO clipboard.min.js -->
<script src="app/txtzone/clipboard.min.js"></script>
</head>
<body>
<my-app>Loading AppComponent content here ...</my-app>
</body>
</html>
app.component.ts:
import '../txtzone/clipboard.min.js';
declare var test2: any; // variable as the name of the function inside clipboard.min.js
@Component({
selector: 'txt-zone',
templateUrl: 'app/txtzone/Txtzone.component.html',
styleUrls: ['app/txtzone/TxtZone.css'],
})
export class TxtZoneComponent implements AfterViewInit {
// call test2
callTest2()
{
new test2(); // the javascript function will execute
}
}
对于暴露不止一个变量的 .js 文件（与 drawGauge 不同），更好的解决方案是设置 Typescript 编译器处理 .js 文件。
在你的 tsconfig.json 中，将 allowJs 选项设置为 true：
"compilerOptions": {
...
"allowJs": true,
...
}
component.ts或d.ts中声明每个变量。import * as drawGauge from '../../../../js/d3gauge.js';
只需在您的TS代码中添加new drawGauge(this.opt);。这个解决方案适用于我目前正在工作的嵌入到Laravel中的带有Angular-cli的项目。在我的情况下，我尝试从node_modules导入poliglot库（顺便说一句：非常适合翻译）：
import * as Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js';
...
export class Lang
{
constructor() {
this.polyglot = new Polyglot({ locale: 'en' });
...
}
...
}
node_modules 复制任何文件 :)。
您还可以查看此列表，了解如何在Angular中包含库的其他方式。
假设您在某个 Angular 项目中的 Visual-Studio 下的 assets/js 文件夹中添加了一个名为 "xyz.js" 的文件，则将其包含到 .angular-cli.json 最简单的方法是将其添加到该文件中。
"scripts": [ "assets/js/xyz.js" ],
1) 首先在index.html文件中插入JS文件路径：
<script src="assets/video.js" type="text/javascript"></script>
2) 在component.ts中导入JS文件并声明变量：
declare var RunPlayer: any;
注意: 变量名应与js文件中函数的名称相同
3) 在组件中调用js方法
ngAfterViewInit(){
setTimeout(() => {
new RunPlayer();
});
}