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

Question

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

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

import popper from 'cytoscape-popper';
import qt from 'cytoscape-qtip';

_.use(require('cytoscape-popper'));
_.use(require('cytoscape-qtip'));

但是，当我使用this.cy.popper()时，并没有编译为说popper不是Core类型的函数。

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

如何在angular中使用这些扩展名？

Answer 1

[我使用Angular CLI 7.x生成项目并成功使用扩展名：

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

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

1. 使用npm install cytoscape安装cytoscape
2. 使用npm install --save @types/cytoscape安装cytoscape类型

3. 安装根目录类型npm install @types/node --save-dev（您可以使用--save参见npm指南）

4. 请确保您的tsconfig.json文件具有以下内容，否则添加它（这需要'require（...）'起作用）：

   "typeRoots": [ "./node_modules/@types" ]
   

5. 使用'npm install cytscape-panzoom安装cytoscape扩展名（在您的情况下，您的扩展名代替“ cytoscape-panzoom”，请检查您正在使用的扩展名的github）

6. 添加cytoscape扩展名的javascript和样式文件； .js和.css（如果适用）到“ angular.json”文件内的相关部分：

   “ styles”：[“ src / styles.css”，“ ./ node_modules / cytoscape-panzoom / cytoscape.js-panzoom.css”]，“脚本”：[“ ./ node_modules / cytoscape-panzoom / cytoscape-panzoom.js”]

7. 在Angular项目的根目录中创建一个文件，其中包含扩展名* .d.ts，在我的情况下，我使用了“ panzoom.d.ts”，您可以使用您的cytoscape扩展名或直接键入的名称。d.ts。

8. 将以下代码放入您的.d.ts文件中，代替您可以使用扩展名“ cytoscape-panzoom”：

       declare module 'cytoscape-panzoom' {
       const ext: cytoscape.Ext;
       export = ext;
     }
   

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

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

希望答案会有所帮助。