如何在Angular中添加cytoscape扩展 [英] How to add cytoscape extensions in Angular

问题描述

我正在尝试在Angular 8中实现cytoscape扩展

Im trying to implement cytoscape extensions in Angular 8

npm安装cytoscape-edge-editingCytoscape工作正常.

npm install cytoscape-edge-editing Cytoscape work fine.

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);

1. 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:未定义$ [了解更多]

ReferenceError: $ is not defined[Learn More]

推荐答案

首先，您需要修改导入内容.写:

First of all you need to amend your imports. write:

从'cytoscape'导入cytoscape"

"import cytoscape from 'cytoscape'"

"从'jquery'导入$'"

"import $ from 'jquery'"

按照上述解决方案纠正错字错误后

after correcting your typo mistake as mentioned on above solution

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

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

直接导入后，Angular将给出错误，因为您必须添加

Angular will give error following direct import, for it you have to add

"allowSyntheticDefaultImports":true，

"allowSyntheticDefaultImports": true,

在tsconfig.json文件中

in tsconfig.json file under

"experimentalDecorators":正确，

"experimentalDecorators": true,

行和tsconfig.app.json文件中的

line and in tsconfig.app.json file under

类型":[]，

行.为了以角度导入jquery，您必须在your-project/node_modules/@ types/jquery下的index.d.ts文件的末尾添加以下行(如果不存在)(假设您已经安装了mpm jquery):

line. For jquery to be imported in angular you have to add following line (if not there) at the end in index.d.ts file which is under your-project/node_modules/@types/jquery (assuming you have mpm installed jquery):

export = jQuery;

export = jQuery;

然后，您将可以使用以下方法轻松注册jquery:

Then you will be able to register jquery easily using:

cytoscape.use($);

cytoscape.use($);

它将解决您面临的错误.但是jquery可以使用它所使用的扩展名，为此，您必须像下面这样在jquery中注册该扩展名:

it will resolve the error you are facing. But jquery works with the extension it is being used with, for that you have to register that extension with jquery like this:

cytoscape.use(edgeBendEditing，$)

cytoscape.use(edgeBendEditing,$)

此语句将给出参数重载的错误，因为您必须在您的project/node_modules/@ types/cytoscape下修改cytoscape的index.d.ts文件:

This statement will give error of overloading arguments, for it you have to amend the index.d.ts file of cytoscape under your-project/node_modules/@types/cytoscape:

功能使用(模块:扩展):无效；

function use(module: Ext): void;

对此:

功能使用(模块:扩展，模块2 ?:扩展):无效；

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

它将解决您的问题.我使用了具有相同补充的jquery使用contextmenus，希望在遇到相同错误时对您有用.

It'll solve your problem. I have used contextmenus using jquery with the same ammendments, hope that works for you as I was facing the same error.

这篇关于如何在Angular中添加cytoscape扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！