如何在Angular组件中使用Javascript库 [英] How to use Javascript Library in Angular Component

问题描述

我正在构建一个Web客户端，该客户端应该在坐标系统内可视化传感器数据(速度，加速度).为了显示坐标系，我在这里使用了库 graph.js https://github.com/dhuertas/graph.js ，与经典的index.html和普通的javascript完美配合，但是我想使用Angular7，它确实使用TypeScript和Angulars Compnent应用程序结构...
我已经尝试过:在angular 4应用程序中使用外部javaScript库(这基本上正是我所需要的)和几个类似的线程但没有一个对我有用

I am building a Web-Client, which is supposed to visualize Sensor data (velocity, acceleration) inside a coordinate system. To display the coordinate system i used the library graph.js from here https://github.com/dhuertas/graph.js , which worked perfectly fine with a classic index.html and normal javascript, but I want to use Angular7 , which does use TypeScript and Angulars Compnent app structure...
I already tried this: Use external javaScript library in angular 4 application (which is basically exactly what I need) and a couple of similar threads but none did work for me

我所做的是:

我组件的HTML

<div style="position:relative;top:100px;left:950px" id='container' class="trajStrly"></div>
<script type="module" src="../libraries/graph.js"></script>

将component.ts分开:

parts the component.ts:

import * as Graph from '../libraries/graph';
declare var Graph: any;

// ... inside the component Class...
    graph: any;

    ngOnInit() {
        this.graph =  new Graph({
            appendTo : "container",
            canvasWidth : 100,
            canvasHeight : 100,
            colorList : ["#666666","#666666","#00F"],
            xAxisTitle : "X",
            yAxisTitle : "Y"
        }); 
    this.draw();
  }

draw函数可以在JavaScript上正常工作，而不是这里的问题.它使用要绘制的值初始化图形.

the draw function worked fine with the JavaScript and is not the probloem here. It initializes the graph with values to draw.

我得到的错误是graph.js不是一个模块.我已经尝试通过在grapf.js内的 Graph 定义之前放置 export default 来编辑graph.js.也已经通过电子邮件发送给创作者，但他还没有答复我

The Error I get is that graph.js is not a module. I already tried editing graph.js by putting export default in front of the definition of Graph inside grapf.js. Also already emailed the creator, but he did not answer me yet

推荐答案

您说的是吗?

我组件的HTML

the HTML of my component

您不能在组件模板中放置脚本代码或源引用，因为Angular会自动清理模板并删除模板html中的所有脚本.

You cannot place scripts code or source references in component template as Angular will automatically sanitize the template and remove any scripts in the template html.

你能做的是

1. 将引用添加到 angular.json 文件的脚本数组中，或
2. 在 index.html 文件
中添加引用
3. 编写代码以手动将脚本插入DOM

1. Add the reference it in the scripts array in angular.json file, or
2. add the reference in the index.html file
3. write a code to manually inject the script in the DOM

步骤:

1. 创建Assets文件夹，因为您的角度应用程序尚不存在.
2. 在其中复制并粘贴您的js文件.
3. 在 angular.json 文件的scripts数组中添加js文件路径，确保您指向正确的文件.

1. Create Assets folder an your angular application is it doesn't already exists.
2. Copy-paste your js file there.
3. Add the js file path in the scripts array in angular.json file, make sure you point to the correct file.

您的组件代码如下所示

declare var Graph: any;
graph: any;

ngOnInit() {
    this.graph =  new Graph({
        appendTo : "container",
        canvasWidth : 100,
        canvasHeight : 100,
        colorList : ["#666666","#666666","#00F"],
        xAxisTitle : "X",
        yAxisTitle : "Y"
    }); 
    this.draw();
}

注意:无需在您的component.ts中添加此行. import *作为'../libraries/graph';中的Graph

Notice: no need to add this line in your component.ts import * as Graph from '../libraries/graph';

这篇关于如何在Angular组件中使用Javascript库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！