【源码】基于Angular框架的自定义节点渲染系统

项目简介

本项目基于Angular框架，借助@antv/x6-angular-shape包，可将Angular组件或模板作为节点在图形编辑器（如流程图、ERD图）中进行渲染，为开发者提供简单高效的自定义节点渲染方案。

项目的主要特性和功能

1. 支持将自定义的Angular组件或模板注册为节点进行渲染。
2. 可方便更新节点数据，动态改变节点显示内容。
3. 提供多种节点类型的demo和性能测试，便于开发者了解和使用。
4. 与X6框架解耦，可在其他图形编辑器中使用。

安装使用步骤

1. 已下载本项目源码文件。
2. 在项目根目录执行npm install安装依赖。
3. 按需求创建自定义的Angular组件或模板。
4. 注册自定义组件或模板，并添加到图形编辑器。
5. 通过更新节点数据，动态改变节点显示内容，示例如下： ```typescript // 假设已经选中一个节点并获取其实例 let node =...; // 获取节点实例的方式取决于你使用的图形编辑器库

// 更新节点的数据 node.setData({ ngArguments: { value: '新的内容', }, }); ```

常见问题解答（FAQ）

为什么输入属性要放在ngArguments中而非data，且为何不叫ngInput？

因为node.data并非所有属性都是输入属性，遍历赋值不合适。叫ngArguments一是沿用1.x版本API降低升级成本，二是它在Component和TemplateRef基础上抽象出的概念更通用。

2.x版本的x6-angular-shape比1.x版本有什么新特性？

• demo更聚焦：2.x版本demo专注于shape使用与性能测试，去除了无关内容。
• 功能更稳定：解决了1.x版本中ngArguments变化在TemplateRef场景不生效及无法触发ngOnChanges的问题。

版本要求

Angular版本至少为14及以上，14以下实现部分特性较麻烦，有需要可提issue获取指导。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】