Question

我正在尝试在cytoscape-popper中使用cytoscape-qtip的{{1}}和/或cytoscape（以可行的方式）扩展名。

我已使用以下内容导入和使用：

angular 6

但是，当我使用import popper from 'cytoscape-popper'; import qt from 'cytoscape-qtip'; _.use(require('cytoscape-popper')); _.use(require('cytoscape-qtip'));时，并没有说this.cy.popper()不是Core类型的函数。

如果我将popper的类型更改为cy而不是any，则代码会编译，但是不会显示预期的结果。

如何在cytoscape.Core中使用这些扩展名？

Answer 1

我使用Angular CLI 7.x生成了一个项目，并成功使用了扩展名：

Cytoscape在文件结尾的./node-modules/@types/cytoscape下的“ index.d.ts”文件中提供了一些信息，该信息适用于所有扩展名。

我正在写下面所有使“ cytoscape-panzoom”扩展正常工作的步骤。您可以对其他任何扩展程序使用相同的步骤。

使用npm install cytoscape
使用npm install --save @types/cytoscape
安装根类型npm install @types/node --save-dev（您可以使用--save参见npm指南）
确保您的tsconfig.json文件具有以下内容，否则添加它（这需要'require（...）'起作用）：
```
"typeRoots": [ "./node_modules/@types" ]
```
使用“ npm install cytscape-panzoom”安装cytoscape扩展（在您的情况下，您的扩展名代替“ cytoscape-panzoom”，请在github上查看您正在使用的扩展名）
添加cytoscape扩展名的javascript和样式文件； .js和.css（如果适用）到“ angular.json”文件中的相关部分：

“样式”：[“ src / styles.css”，“ ./ node_modules / cytoscape-panzoom / cytoscape.js-panzoom.css”]， “脚本”：[“ ./node_modules/cytoscape-panzoom/cytoscape-panzoom.js”]
在Angular项目的根目录中使用扩展名* .d.ts，在我的情况下，我使用了“ panzoom.d.ts”，您可以使用您的cytoscape扩展名或直接键入。d.ts。
将以下代码放入.d.ts文件中，并代替您可以使用扩展名“ cytoscape-panzoom”：
```
    declare module 'cytoscape-panzoom' {
    const ext: cytoscape.Ext;
    export = ext;
  }
```

在组件内编写以下导入代码：

var cyt = require ('cytoscape');
var pz = require('cytoscape-panzoom');
cyt.use(pz);

现在您可以使用扩展程序了！

使用示例：

...............

let cy_contianer = this.renderer.selectRootElement("#cy");
let cy = cyt({
container: cy_contianer,
layout: this.layout,
elements: this.elements,
minZoom: 0.3,
maxZoom: 5
});

  cy.style(this.style);

 var defaults = {
      zoomFactor: 0.05, // zoom factor per zoom tick
      zoomDelay: 45, // how many ms between zoom ticks       
      zoomInIcon: 'fa fa-plus',
      zoomOutIcon: 'fa fa-minus',
      resetIcon: 'fa fa-expand'

 // .... more settings here removed to make it short for sample
    };

    // HERE WE ARE USING THE EXTENSION THROUGH THE SAME cy OBJECT RETURNED BY cytoscape(..) function. 

    cy.panzoom(defaults);

希望答案会有所帮助。

如何在Angular 6中使用cytoscape的cytoscape-popper扩展？

1 个答案: