更新

Question

我要将此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中执行此操作？我引用此question，由于.ensure无法解决，因此我无法使用的网络包解决方案。

Answer 1

理想情况下，您需要.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（引导程序）文件中引用它，如此

///<reference path="../path/to/d3gauage.d.ts"/>

Answer 2

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

这是一般答案。假设您要将名为testjs.js的文件导入角度2组件。在您的资源文件夹中创建testjs.js：

资产＆gt; 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>

在你的app.component.ts或你要调用的任何component.ts文件中，这个js声明一个变量并调用如下函数：

<强> 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>

Answer 3

您可以加入js文件，而不是在index.html中加入.angular-cli-json文件扩展名。

这是我为实现这一目标而采取的步骤。

首先在js

assets/js

在.angular-cli.json中 - 在脚本下添加文件路径： [../app/assets/js/test.js]
在要使用js文件功能的组件中。

在顶部声明要将文件导入为

Declare const Test:any;

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

Answer 4

以下方法适用于Angular 5 CLI。

为了简单起见，我使用了由oliverbinns创建和提供的类似d3gauge.js演示 - 您可以在Github上轻松找到它。

首先，我只是在与资产文件夹相同的级别上创建了一个名为 externalJS 的新文件夹。然后我复制了以下两个.js文件。

d3.v3.min.js
d3gauge.js

然后我确保在主 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>

etvoilà！：）

Answer 5

这是我在项目中做到的一种简单方法。

假设您需要使用clipboard.min.js 并且为了举例说明，在clipboard.min.js内部有一个调用test2()的函数。

为了使用test2（）函数，你需要：

引用index.html内的.js文件。
将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
    }

}

Answer 6

你也可以试试这个：

import * as drawGauge from '../../../../js/d3gauge.js';

在你的ts代码中只有new drawGauge(this.opt);。这个解决方案适用于项目，其中angular-cli嵌入到我目前正在研究的laravel中。在我的情况下，我尝试从node_modules导入poliglot库（btw：非常适合翻译）：

import * as Polyglot from '../../../node_modules/node-polyglot/build/polyglot.min.js';
...
export class Lang 
{
    constructor() {

        this.polyglot = new Polyglot({ locale: 'en' });
        ...
    }
    ...
}

这个解决方案很好，因为我不需要复制来自node_modules :)的任何文件。

更新

您还可以查看this LIST如何在角色中包含库的方法。

Answer 7

1）首先在 index.html 文件中插入JS文件路径：

<script src="assets/video.js" type="text/javascript"></script>

2）导入JS文件并在 component.ts 中声明变量：

导入'./../../../ assets / video.js';
声明var RunPlayer ：任意；

注意：变量名称应与js文件中的函数名称相同

3）在组件中调用js方法

ngAfterViewInit(){

    setTimeout(() => {
        new RunPlayer();
    });

}

Answer 8

对于公开多个变量的.js文件（与drawGauge不同），更好的解决方案是将Typescript编译器设置为处理.js文件。

在您的tsconfig.json中，将allowJs选项设置为true：

"compilerOptions": {
     ...
    "allowJs": true,
     ...
}

否则，您必须声明component.ts或d.ts中的每个变量。

Answer 9

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

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

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

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

9 个答案:

更新