如何在 Angular 中添加 cytoscape 扩展

Question

我正在尝试在 Angular 8

中实现 cytoscape 扩展

npm 安装 cytoscape-edge-editing Cytoscape 工作正常。

1.app.ts

import * as cytoscape from 'cytoscape';
import * as edgeBendEditing from 'cytoscape-edge-editing';
import * as jquery from 'jquery';


let cytoscape = require('cytoscape');
let jquery = require('jquery');
let edgeBendEditing = require('cytoscape-edge-editing');

edgeBendEditing( cytoscape, jquery );
cytoscape.use(edgeBendEditing);

angular.json

     "scripts": [
              "node_modules/cytoscape/dist/cytoscape.min.js",
              "node_modules/cytoscape-edge-editing/cytoscape-edge-editing.js",
              "node_modules/query/dist/jquery.min.js"
            ]

浏览器报错如下

ReferenceError: $ 未定义[了解更多]

Answer 1

我认为 "scripts" 部分有错字。应该是"node_modules/jquery/dist/jquery.min.js"。

Answer 2

首先你需要修改你的导入。写：

"import cytoscape from 'cytoscape'"

"import $ from 'jquery'"

按照上述解决方案更正您的拼写错误后

"node_modules/jquery/dist/jquery.min.js".

Angular 直接导入后会报错，需要添加

"allowSyntheticDefaultImports": true,

在tsconfig.json 文件下

"experimentalDecorators": true,

行和tsconfig.app.json文件中

"types": [],

行。要在 angular 中导入 jquery，您必须在 index.d.ts 文件的末尾添加以下行（如果不存在），该文件位于 your-project/node_modules/@types/jquery（假设你安装了 mpm jquery）：

export = jQuery;

然后您就可以使用以下方式轻松注册jquery：

cytoscape.use($);

它将解决您面临的错误。但是 jquery 与它一起使用的扩展一起工作，因为你必须像这样用 jquery 注册那个扩展：

cytoscape.use(edgeBendEditing,$)

这个语句会报参数重载的错误，为此你必须修改your-project/node_modules/@types/cytoscape:

下cytoscape的index.d.ts文件

function use(module: Ext): void;

对此：

function use(module: Ext, module2?: Ext): void;

它将解决您的问题。我使用具有相同修正的 jquery 的上下文菜单，希望它对你有用，因为我遇到了同样的错误。

如何在 Angular 中添加 cytoscape 扩展

How to add cytoscape extensions in Angular

angular

cytoscape.js

cytoscape