【angular-gojs使用笔记】使用Data和Template创建Node

weixin_43911727

已于 2023-03-27 17:13:28 修改

阅读量182

点赞数

分类专栏： GoJS 文章标签： angular.js javascript

于 2023-03-25 15:03:00 首次发布

本文链接：https://blog.csdn.net/weixin_43911727/article/details/129766627

版权

这篇笔记介绍了如何在Angular应用中结合GoJS库，通过数据和模板创建具有不同特性的Node。通过将节点的颜色和文本信息保存在数据数组中，并使用go.Binding映射到节点对象，实现了模板复用，简化了节点创建过程。同时，利用Diagram的nodeTemplateMap，可以定义多个模板，通过category属性匹配不同的节点数据，实现更灵活的节点展示。

摘要由CSDN通过智能技术生成

在实际使用过程中，我们常常会创建相似的节点。例如：

const node1 =
  $(go.Node, "Auto",
    $(go.Shape,
      {
    figure: "RoundedRectangle",
        fill: "lightblue" }),
    $(go.TextBlock,
      {
    text: "Alpha",
        margin: 5 })
  )
diagram.add(node1);

const node2 =
  $(go.Node, "Auto",
    $(go.Shape,
      {
    figure: "RoundedRectangle",
        fill: "pink" }),
    $(go.TextBlock,
      {
    text: "Beta",
        margin: 5 })
  );
diagram.add(node2);

diagram.add(
  $(go.Link,
    {
    fromNode: node1, toNode: node2 },
    $(go.Shape)
  ));