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

Question

我正在尝试将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 导入

我试着关注发布的这个问题，但它并没有让我走多远：如何在Typescript中使用Cytoscape.js的UI扩展？

我尝试过使用一个自定义的打字员.d.ts文件，该文件由@types/cytoscape推荐(见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

预期的结果是用这个.cy.edgehandles('drawon')启动edgehandlers；

Answer 1

我使用Angular CLI7.x生成了一个项目，并成功地使用了扩展：

Cytoscape在下的"index.d.ts"文件中提供了一些信息/文件末尾的节点模块/@types/cytoscape，它应该适用于所有扩展名。

我在下面写下了我用来使"细胞景观panzoom"扩展工作的所有步骤。您可以对任何其他扩展使用相同的步骤。

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

3. 安装根类型npm install @types/node --save-dev(您可以使用--save，请参阅npm指南)

4. 请确保tsconfig.json文件包含以下内容，否则添加它(这是"需要(…)"工作所必需的)：

   "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/cytoscope.js panzoom.css"]，"scripts"：["./node_modules/cytoscape panzoom/cytoscope panzom.js"]

7. 使用扩展名*.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);

希望答案能有所帮助。

Answer 2

我犯了一个愚蠢的错误，但如果有人正在与之斗争。你所需要做的就是使用："//为扩展设置一个变量：public eh：有；

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