Cytoscape.js和Angular6

Question

我想在我的Angular项目中导入cytoscape.js库，但我不知道该如何操作。据我所知，没有官方的适用于Angular的cytoscape模块，有没有办法手动导入cytoscape？

- Francisca GV

Answer 1

Philipp的答案实际上是有效的，但似乎是不当地使用了既有的npm install和JS文件。您可以跳过指令中的npm install步骤，它将同样有效。

要实际使用npm安装的包，我建议按照以下步骤操作：

1. 运行 npm install cytoscape
2. 运行 npm install --save @types/cytoscape 以获得适当的IDE提示。
3. 在组件中添加 import * as cytoscape from 'cytoscape';
4. 像预期的那样使用它，例如：let cy = cytoscape({...})

- D.C. Joo

---

听起来很合理。我认为我们在应用程序方面有非常相似的方法。这个答案值得被接受，因为它正确地使用了npm安装工作流程和IDE提示。 - Dmytro

确切地说，这应该是被接受的答案。当我写下我的答案时，我并不知道正确的工作流程，但仍然想提供我的解决方案，因为它确实有效。然而，它是多余和混乱的。应该这样做！ - Philipp

Answer 2

更新：请查看D.C. Joo的答案，这应该是被接受的答案。

实际上，在Angular中导入JS库没有问题，这是我使用npm和Angular6的方法：

1. 运行npm install cytoscape
2. 从https://github.com/cytoscape/cytoscape.js/blob/master/dist/cytoscape.min.js下载Cytoscape
3. 在你的Angular根目录下创建一个名为scripts的目录并将下载的文件放置在其中

4. 在你的angular.json中包含你已下载的脚本：

   "projects": { "myproject": { ... "architect": { "build": { ... "scripts": [ "src/scripts/cytoscape.min.js" ] ... (注意：对不起，格式可能有点乱，我已经尽力了)

5. 在你想要使用Cytoscape的Angular组件中，添加declare var cytoscape: any;到导入

现在你可以像平常一样使用Cytoscape了，祝玩得愉快 :)

- Philipp

---

非常感谢，我做了完全相同的事情，但是参考了这个示例：https://github.com/asiftasleem/angular-2-cytoscape - Francisca GV