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

【问题标题】：How to use cytoscape-popper extension of cytoscape in Angular 6?如何在 Angular 6 中使用 cytoscape 的 cytoscape-popper 扩展？
【发布时间】：2018-08-29 20:03:22
【问题描述】：

我正在尝试在angular 6 中使用cytoscape 的cytoscape-popper 和/或cytoscape-qtip（无论哪个有效）扩展。

我已经使用了以下导入和使用：

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中使用这些扩展？

【问题讨论】：

您好，您是否在 cytoscape 中注册了扩展程序（例如：cy.use('cytoscape-popper')？您使用的是哪个浏览器？
嗨，Stephan，我已经导入了 cytoscape（导入 * as _ from 'cytoscape'）。因此在上面的代码 sn-p 中，我使用 _.use(require('cytoscape-popper'))。我也试过 _.use('cytoscape-popper') 没有任何区别。此外，在使用 this.cy.popper() 时会显示一个红色标记，表示 popper 不是 Core 类型的函数。我正在使用 chrome 浏览器。
Stephan，你有工作代码 sn-p/project，我可以在其中查找并尝试找到我正在犯的错误吗？
很遗憾没有，我正在使用 cytoscape 和一些没有 angular 的扩展，但我过去也遇到过类似的问题，但是，我发现 this article 关于 ngCytoscape，它可以帮助您完成任务

标签： jquery cytoscape.js cytoscape

【解决方案1】：

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

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

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

使用npm install cytoscape 安装 cytoscape
使用npm install --save @types/cytoscape 安装 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 和 style 文件； .js 和 .css（如果适用）添加到“angular.json”文件中的相关部分：

"styles": ["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 扩展名或简单的 typings.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);

希望答案有所帮助。

【讨论】：