Question

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

var g = new Dracula.Graph();

编译器抱怨

找不到名称“吸血鬼”

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

import { ?? } from '??';

Answer 1

首先使用npm安装依赖项

const [arr1, arr2, arr3, arr4, arr5] = Array.from({ length: 5 }, () => []);

现在，我将把dracula github repository的主要示例转换为有角度的打字稿。

在npm install --save graphdracula raphael中：

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

Answer 2

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

import * as drac from 'graphdracula';

然后您就可以使用它

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

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

如何在Angular中使用Dracula图形库？

2 个答案: