ej2 DiagramComponent指定connectionDataSource后节点消失问题咨询

核心问题1：@ViewChild绑定错误 #

你错误地将layout变量通过@ViewChild("diagram")绑定到Diagram组件实例，这会覆盖你在ngOnInit中配置的布局参数，导致Diagram无法正确初始化布局，最终节点无法渲染。

核心问题2：节点缺少基础渲染配置 #

nodeDefaults方法仅返回原始节点数据，未设置节点的宽高、内容展示等必要属性，即使数据绑定成功，节点也会因无尺寸而不可见。

修正后的完整代码 #

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { DiagramComponent, NodeModel, ConnectorModel, LayoutModel, DataSourceModel, DataManager } from '@syncfusion/ej2-angular-diagrams';

@Component({
  selector: 'app-relationship-playground-component',
  template: `<ejs-diagram id="diagram" width="100%" height="580px" [layout]='layout' [dataSourceSettings]='dataSourceSettings' [getNodeDefaults]='nodeDefaults' [getConnectorDefaults]='connectorDefaults'>
  </ejs-diagram>`,
  encapsulation: ViewEncapsulation.None
})
export class RelationshipPlaygroundComponentComponent implements OnInit{
  // 修正：@ViewChild绑定到DiagramComponent实例，而非layout变量
  @ViewChild("diagram") public diagram?: DiagramComponent;
  public layout?: LayoutModel;
  public dataSourceSettings?: DataSourceModel;

  public connections : Object[] =  [
    {
      id: "a96b708d-9878-409b-9424-79afd536fbcb",
      source: "e0ad8a67-65a4-488e-a13e-af4a51095da4",
      target: "991d0d06-f084-43df-871d-2c501a41108e",
    }
  ]

  public elements : Object[] = [
    {
      caption: "Accom (sample)",
      id: "e0ad8a67-65a4-488e-a13e-af4a51095da4",
      recordId: "405947d0-2ffb-4ded-8675-0475f19f5a81",
    },
    {
      caption: "Our company",
      id: "991d0d06-f084-43df-871d-2c501a41108e",
      recordId: "e308b781-3c5b-4ecb-89ef-5c1ed4da488e",
    }
  ]

  public nodeDefaults(node: NodeModel): NodeModel {
    // 补充节点基础样式：设置宽高、内容、背景色等
    node.width = 180;
    node.height = 60;
    node.style = { fill: "#6BA5D7", strokeColor: "#5A9ED6" };
    node.annotations = [{ content: node.data?.caption as string }];
    return node;
  }

  public connectorDefaults(connector: ConnectorModel): ConnectorModel {
    connector.type = "Orthogonal";
    connector.cornerRadius = 7;
    connector.style = { strokeColor: "#6BA5D7", strokeWidth: 2 };
    return connector;
  }

  ngOnInit(): void {
    this.layout = {
      type: "HierarchicalTree", 
      verticalSpacing: 40,
      horizontalSpacing: 80
    };
    this.dataSourceSettings = {
      id: "id",
      dataManager: new DataManager(this.elements as JSON[]),
      connectionDataSource: {
        id: 'id',
        sourceID: 'source',
        targetID: 'target',
        dataManager: new DataManager(this.connections as JSON[])
      }
    };
  }
}

额外说明 #

• 修正@ViewChild后，Diagram能正确读取layout配置，确保节点按布局规则排列。
• nodeDefaults中补充的宽高、内容配置，保证节点能正常渲染显示。
• 若使用HierarchicalTree布局，当前的节点连接关系符合层级逻辑，布局会正常展示。

内容的提问来源于stack exchange，提问作者Dmitry Avdoshin