为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

慕村225694 2019-12-20 10:19:08

我将将此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 回答

?
动漫人物

理想情况下,您需要具有.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"/>


查看完整回答
反对 回复 2019-12-20
?
喵喔喔

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


这是一个普遍的答案。假设您要将名为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>


查看完整回答
反对 回复 2019-12-20
?
慕仰8121524

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


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


首先将您的外部js文件包含在assets/js

在.angular-cli.json-在脚本下添加文件路径: [../app/assets/js/test.js]

在要使用js文件功能的组件中。

在顶部将文件导入为声明


declare const Test:any;

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


查看完整回答
反对 回复 2019-12-20

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信