1

我遇到了对我来说似乎很完美的 JS 库 https://www.graphdracula.net/
我使用 npm - npm i raphael graphdracula 安装了所需的库。它在 node_modules 中创建了文件夹，并按预期更新了 package.json
现在当我尝试创建图形时

var g = new Dracula.Graph();

编译器抱怨

找不到名字“德古拉”

问题是我如何导入库以便打字稿/角度知道它？IDE 不是很有帮助。我知道我必须在我的模块中导入它，因为我不知道如何找出要导入的内容

import { ?? } from '??';
4

2 回答 2

1

首先使用 npm 安装依赖项

npm install --save graphdracula raphael

现在我将dracula github 存储库的主要示例翻译成 angular 的 typescript。

在module.component.ts：

import * as dracula from 'graphdracula';

//[...]

const Graph = dracula.Graph;
const Renderer = dracula.Renderer.Raphael;
const Layout = dracula.Layout.Spring;

const graph = new Graph();

graph.addEdge('Banana', 'Apple');
graph.addEdge('Apple', 'Kiwi');
graph.addEdge('Apple', 'Dragonfruit');
graph.addEdge('Dragonfruit', 'Banana');
graph.addEdge('Kiwi', 'Banana');

const layout = new Layout(graph);
const renderer = new Renderer('#paper', graph, 400, 300);
renderer.draw();

在module.component.html

<div id='paper'>
</div>
于 2018-11-15T11:29:27.857 回答
0

安装js的时候。不是用 typescript 编写的库（没有类型定义 *.d.ts），您需要像这样导入它：

import * as drac from 'graphdracula';

那么你可以使用它

var g = new drac.Dracula.Graph();

您可以在此处阅读有关导入 3rd 方库的更多信息：https ://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af

于 2018-07-21T19:55:42.587 回答