求适配Angular 13的可用Cytoscape.js整合Git仓库

方案一：手动封装Angular组件（最稳定可靠） #

由于官方未专注Angular封装，手动封装是最可控的方式，步骤如下：

1. 安装依赖
   执行以下命令安装Cytoscape.js及类型定义：

npm install cytoscape --save
npm install @types/cytoscape --save-dev

2. 创建自定义Cytoscape组件
   新建cytoscape-graph.component.ts文件，实现基础的图表组件：

import { Component, Input, OnInit, ElementRef, OnDestroy } from '@angular/core';
import cytoscape from 'cytoscape';

@Component({
  selector: 'app-cytoscape-graph',
  template: '<div #cyContainer style="width: 100%; height: 600px;"></div>'
})
export class CytoscapeGraphComponent implements OnInit, OnDestroy {
  @Input() elementConfig: { nodes: any[], edges: any[] };
  @Input() styleConfig?: any[];
  @Input() layoutConfig?: any;
  private cyInstance: any;

  constructor(private elRef: ElementRef) {}

  ngOnInit(): void {
    const container = this.elRef.nativeElement.querySelector('#cyContainer');
    this.cyInstance = cytoscape({
      container,
      elements: {
        nodes: this.elementConfig.nodes,
        edges: this.elementConfig.edges
      },
      style: this.styleConfig || [
        {
          selector: 'node',
          style: { 'background-color': '#666', 'label': 'data(id)' }
        },
        {
          selector: 'edge',
          style: { 'width': 3, 'line-color': '#ccc', 'target-arrow-color': '#ccc', 'target-arrow-shape': 'triangle' }
        }
      ],
      layout: this.layoutConfig || { name: 'grid', rows: 1 }
    });
  }

  ngOnDestroy(): void {
    this.cyInstance?.destroy(); // 清理实例避免内存泄漏
  }

  // 可扩展添加Cytoscape API方法，比如获取实例、添加事件监听等
  getCyInstance() {
    return this.cyInstance;
  }
}

3. 在父组件中使用
   在父组件模板和类中引入并配置图表数据：

<app-cytoscape-graph 
  [elementConfig]="graphElements"
  [styleConfig]="customStyle"
  [layoutConfig]="customLayout">
</app-cytoscape-graph>

graphElements = {
  nodes: [
    { data: { id: 'node1', label: '节点1' } },
    { data: { id: 'node2', label: '节点2' } }
  ],
  edges: [
    { data: { source: 'node1', target: 'node2', label: '连接' } }
  ]
};

customStyle = [
  {
    selector: 'node',
    style: { 'background-color': '#2ecc71', 'label': 'data(label)', 'font-size': 14 }
  },
  {
    selector: 'edge',
    style: { 'width': 2, 'line-color': '#3498db', 'label': 'data(label)' }
  }
];

customLayout = { name: 'circle' };

方案二：修复现有ngx-cytoscape仓库 #

如果偏好使用现成封装库，可尝试修复你找到的仓库：

• 克隆仓库后，修改package.json中Angular核心依赖版本（如@angular/core、@angular/common等）为13.x.x
• 更新cytoscape版本至3.20+版本，确保与Angular13兼容
• 执行npm install后，修复编译阶段的类型不匹配、API变更等错误（比如调整装饰器语法、更新过时方法）

方案三：选用社区兼容库 #

在npm仓库中搜索标注支持Angular13的Cytoscape封装库，注意查看版本兼容性说明，安装后进行基础功能测试，确认适配后再投入使用。

内容的提问来源于stack exchange，提问作者Ragesh Puthiyedath Raju