Question

我正在构建一个Web客户端，该客户端应该在坐标系统内可视化传感器数据（速度，加速度）。为了显示坐标系，我从这里https://github.com/dhuertas/graph.js使用了graph.js库，它与经典的index.html和普通的javascript都可以很好地工作，但是我想使用Angular7，它确实使用TypeScript和Angulars Compnent应用程序结构...
我已经尝试过：Use external javaScript library in angular 4 application （这基本上正是我所需要的）和几个类似的线程但没有一个对我有用

我所做的是：

我组件的HTML

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

将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上正常工作，而不是这里的问题。它使用要绘制的值初始化图形。

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

Answer 1

你说吗？

我组件的HTML

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

你能做的是

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

编辑： 步骤：

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

您的组件代码如下所示

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 * as Graph from '../libraries/graph';

中添加此行

如何在Angular组件中使用Javascript库

1 个答案: