在角度应用程序中使用外部javaScript库

时间:2017-07-06 10:01:10

标签: javascript angular

我有一个角度4应用程序,我有一个javascript组件,我在javascript文件中创建:timeline.js。 javascript组件运行良好,但我想使用角度为4.因此,我将我的js文件放在文件夹assets/js/timeline.js中。

在文件index.html中,我使用<script src="assets/js/timeline.js"></script>调用我的js文件,并在app.component.ts中调用:

var timeline = new Timeline("timelineVisualization")

因此,通常情况下,时间轴是在具有id="timelineVisualization"

的div中创建的

但它不起作用我在new Timeline上有错误:找不到名称时间轴。

那么,你知道如何从timeline.js调用时间轴构造函数吗?

6 个答案:

答案 0 :(得分:30)

你只需要做

 import * as Timeline from '../assets/js/timeline.js';

您也可以(在文件顶部):

declare var Timeline: any;

还检查below是否有良好做法。

答案 1 :(得分:16)

只需延伸@Deblaton Jean-Philippe的above答案,作为一般的良好做法,最好将js或其他css文件作为构建的一部分包含在内,而不是将它们放在索引中html的。

如果您使用的是捆绑包,请使用类似的东西。

  "styles": [
    "styles.scss",
    //Other style files
  ],
  "scripts": [
    "../node_modules/jsplugin/dist/js/plugin.js",
    //Other script files
  ],

答案 2 :(得分:3)

有四种方法可以在Angular2 +中添加外部javaScript库。例如:npm中的tinymce lib

1。将lib添加到index.html:

<script src="assets/tinymce.min.js"></script>

*。component.ts:

// tell TypeScript compiler that "tinymce" variable is declared somewhere in *.js
declare let tinymce: any;

2。将lib添加到Angular.json:

从npm安装tinymce:

npm i tinymce

将* .js添加到angular.json:

"scripts": ["node-modules/tinymce/tinymce.min.js"]

*。component.ts:

// tell TypeScript compiler that "tinymce" variable is declared somewhere in *.js
declare let tinymce: any;

3。在TypeScript中导入javaScript文件:

从npm安装tinymce:

npm i tinymce

*。component.ts:

//tinymce: is a variable in 'tinymce.min.js' file => dont need "declare let tinymce"
import * as tinymce from 'tinymce/tinymce.min.js'; // "js" at the end is important

4.TypeScript方式(我喜欢):

https://www.typescriptlang.org/dt/search?search=tinymce

中搜索tinymce的typeScript标头* .d.ts

然后安装:

   npm i @types/tinymce --save-dev

按照上面的第一种或第二种方式将 tinymce.min.js 添加到Angular中。

*。component.ts:

// tinymce module at 'node-modules/@types/tinymce'
// 'node-modules/@types/tinymce'is just header, so it isn't compiled with angular
// don't need to use "declare let tinymce"
import * as tinymce from 'tinymce';

您可以跳过tinymce的功能。读取tinymce lib的代码非常容易

经过以上所有四种方式:

使用带有JavaScript语法的tinymce。例如,tinymce lib中的指南:https://www.tiny.cloud/docs/general-configuration-guide/use-tinymce-classic/#

答案 3 :(得分:0)

试试这个:

declare const Timeline; 

答案 4 :(得分:0)

您可以尝试从以下位置找到您的类型定义:

Definitly Typed Github Page

如果找不到你的库,你可以自己编写你的接口(并尝试将请求拉到其他开发人员的github页面),这个接口就像一个.ts文件。

这是一个开始

declare global {
    interface Window { 
        Timeline: any
    }
}

答案 5 :(得分:0)

扩展到答案之上

我们可以通过其他方式将库添加到项目中

  1. 添加HTML

    <html lang="en">
     <script src="https://nexplayer.nexplayersdk.com/latest/nexplayer.js"> 
     </script>
     <head>
     </head>
     <body>
       <app-root></app-root>
     </body>
    </html>
    
  2. 添加angular.json或.angular-cli.json

    "scripts": [
        "../node_modules/jsplugin/dist/js/plugin.js",
         //Other script files
     ],
    
  3. 添加组件

    import * as Timeline from '../assets/js/timeline.js';
    

第二件事是声明库的名称

  1. 添加组件

     import { OnInit } from '@angular/core';
     declare var library: any;
    
  2. (类型定义(* .d.ts))。如果src / typings.d.ts不存在,则创建它,否则,请打开它,并将您的包添加到其中。

    declare module 'your-library'