如何在 Angular 7 中包含和正确使用 @types/cytoscape UI 扩展答案

【问题标题】：How to include and properly use @types/cytoscape UI extension in Angular 7如何在 Angular 7 中包含和正确使用 @types/cytoscape UI 扩展
【发布时间】：2020-05-17 05:05:26
【问题描述】：

我正在尝试将 grid-guide 和 edgehandles cytoscape.js 扩展包含到我的 Angular7 项目中。它可以工作，但不像预期的那样（我认为），我无法在初始化但未启动时禁用绘图边缘句柄。

cytoscape 是通过 @types/cytoscape 导入的

网格指南：https://github.com/iVis-at-Bilkent/cytoscape.js-grid-guide 边缘句柄：https://github.com/cytoscape/cytoscape.js-edgehandles

目前通过 npm 导入扩展

我已尝试关注已发布的此问题，但并没有让我走得太远：How to use UI extension for Cytoscape.js in Typescript?

我尝试过使用 @types/cytoscape 推荐的自定义 typings.d.ts 文件（参见 index.d.ts 文件底部）

typings.d.ts:
declare module 'edgehandles-cyto' {
  const ext: cytoscape.Ext;
  export = ext;
};

And importing into the component:
import cytoscape = require('cytoscape'); //This works


//Importing jquery and grid-guide, works, but maybe not as intended
var jquery = require('jquery');
var gridGuide = require('cytoscape-grid-guide');

//Importing cytoscape extension, edgehandles, works, but not as intended
var edgehandles = require('cytoscape-edgehandles');

//Connected with cytoscape
gridGuide( cytoscape, jquery );
cytoscape.use(edgehandles);

//After cytoscape is initialized, trying to include these extensions
this.cy.gridGuide(options);    //Options and defaults are already set
this.cy.edgehandles(defaults);

项目链接： https://stackblitz.com/edit/angular-cytoscape

预期的结果是用 this.cy.edgehandles('drawon'); 开始边缘句柄；

【问题讨论】：

标签： typescript typescript-typings angular7

【解决方案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);

希望答案有所帮助。

【讨论】：

【解决方案2】：

我犯的愚蠢错误，但如果有人正在努力解决它。您需要做的就是使用： ''' //为扩展设置一个变量：公开 eh:any;

....

this.eh = this.cy.edgehandles(默认值); this.eh.disable(); //而不是 this.cy.edgehandles('drawon'); '''

【讨论】：