在角度應用程序中使用外部 javaScript 庫

Question

我有一個 angular 4 應用程序，並且有一個在 javascript 文件中創建的 javascript 組件： timeline.js 。 javascript 組件運行良好，但我想將它與 angular 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調用 Timeline 構造函數嗎？

Answer 1

你只需要做

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

你也可以這樣做（在你的文件的頂部）：

declare var Timeline: any;

另請檢查下面的良好做法。

Answer 2

只是擴展@Deblaton Jean-Philippe 的上述回答，作為一般的良好做法，最好將 js 或其他 css 文件作為構建的一部分，而不是將它們放在 index.html 中。

如果您使用的是捆綁器，請使用類似這樣的東西。

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

Answer 3

在 Angular2+ 中有 4 種方法可以添加外部 javaScript 庫。 例如：npm 中的 tinymce 庫

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. 將庫添加到 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的代碼

畢竟以上 4 種方式：

使用帶有 javaScript 語法的 tinymce。 例如，tinymce lib 中的指南： https ://www.tiny.cloud/docs/general-configuration-guide/use-tinymce-classic/#

Answer 4

進一步擴展以上答案

我們可以用不同的方式將庫添加到項目中

在 HTML 中添加

<html lang="en"> <script src="https://nexplayer.nexplayersdk.com/latest/nexplayer.js"> </script> <head> </head> <body> <app-root></app-root> </body> </html>

添加 angular.json 或 .angular-cli.json

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

添加組件

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

第二件事是聲明圖書館的名字

在組件中添加

 import { OnInit } from '@angular/core'; declare var library: any;

在類型定義 (*.d.ts) 中。如果 src/typings.d.ts 不存在則創建，否則打開它，並將您的包添加到其中
```
declare module 'your-library'
```

Answer 5

試試這個：

declare const Timeline;

Answer 6

您可以嘗試從以下位置找到您的類型定義：

明確類型的 Github 頁面

如果找不到你的庫，你可以自己編寫接口（並嘗試將請求拉到 github 頁面供其他開發人員使用），這個接口將像一個 .ts 文件一樣工作。

這是一個開始

declare global {
    interface Window { 
        Timeline: any
    }
}

在角度應用程序中使用外部 javaScript 庫

問題描述

6 個解決方案

解決方案1
61 已采納 2017-07-06 10:10:35

解決方案2
32 2017-07-06 10:16:16

解決方案3
19 2020-09-13 04:00:45

解決方案4
9 2018-08-30 11:48:50

解決方案5
0 2017-07-06 10:12:00

解決方案6
0 2017-07-06 10:13:40

在角度應用程序中使用外部 javaScript 庫

問題描述

6 個解決方案

解決方案1 61 已采納 2017-07-06 10:10:35

解決方案2 32 2017-07-06 10:16:16

解決方案3 19 2020-09-13 04:00:45

解決方案4 9 2018-08-30 11:48:50

解決方案5 0 2017-07-06 10:12:00

解決方案6 0 2017-07-06 10:13:40

解決方案1
61 已采納 2017-07-06 10:10:35

解決方案2
32 2017-07-06 10:16:16

解決方案3
19 2020-09-13 04:00:45

解決方案4
9 2018-08-30 11:48:50

解決方案5
0 2017-07-06 10:12:00

解決方案6
0 2017-07-06 10:13:40