Adr*_*ien 19 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")
所以,通常,时间轴是在div中创建的id="timelineVisualization".
但它不起作用,我有一个错误new Timeline:找不到名称时间轴.
所以,你知道如何从中调用Timeline构造函数timeline.js吗？
Deb*_*ppe 34
你只需要做
import * as Timeline from '../assets/js/timeline.js';
你也可以(在你的文件的顶部):
declare var Timeline: any;
请查看下面的良好做法.
Sri*_*san 24
只是延伸@Deblaton Jean-Philippe 的上述答案并作为一般的良好实践,最好将js或其他css文件包含在构建中,而不是将它们放在index.html中.
如果您使用的是捆绑器,请使用类似的东西.
"styles": [
"styles.scss",
//Other style files
],
"scripts": [
"../node_modules/jsplugin/dist/js/plugin.js",
//Other script files
],
Hun*_*NM2 11
有 4 种方法可以在 Angular2+ 中添加外部 javaScript 库。例如：npm 中的 tinymce lib
1. 在 index.html 中添加 lib：
<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 中添加 lib：
从 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/#
进一步扩展上述答案
我们可以以不同的方式将库添加到项目中
在 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'
| 归档时间： |
|
| 查看次数： |
34652 次 |
| 最近记录： |