javascript - 如何添加更多 SVG 或 Html 元素/事件到Angular 5 的模板？

Question

- 除了#nodeTemplate 和#linkTemplate，我们如何使用customTemplate 向ngx-graphs 添加更多元素？

<ngx-graph id="main_drawing_board" class="chart-container" [view]="view" [legend]="showLegend"
        [links]="hierarchicalGraph.links" (legendLabelClick)="onLegendLabelClick($event)"
        [nodes]="hierarchicalGraph.nodes" [scheme]="colorScheme" [orientation]="orientation" [curve]="curve" (select)="select($event)" [update$]="update$">
        <ng-template #defsTemplate>
        ......................
        </ng-template>

        <ng-template #nodeTemplate let-node>
     .....................
        </ng-template>

        <ng-template #linkTemplate let-link>
    ..............
        </ng-template>

        <ng-template #customTemplate>
          <svg:text x="300" y="200">custom text</svg:text>
        </ng-template>
      </ngx-graph>

Answer 1

从 ngx-graph 6.0.0 开始，您可以在 ngx-graph 元素中添加任意 SVG 元素，在 ng-template 元素旁边，它将被投影到图形的 SVG 元素中。

例子：

<ngx-graph
  class="chart-container"
  [view]="[500, 550]"
  [links]="[
    {
      id: 'a',
      source: 'first',
      target: 'second',
      label: 'is parent of'
    }, {
      id: 'b',
      source: 'first',
      target: 'c1',
      label: 'custom label'
    }, {
      id: 'd',
      source: 'first',
      target: 'c2',
      label: 'custom label'
    }, {
      id: 'e',
      source: 'c1',
      target: 'd',
      label: 'first link'
    }, {
      id: 'f',
      source: 'c1',
      target: 'd',
      label: 'second link'
    }
  ]"
  [nodes]="[
    {
      id: 'first',
      label: 'A'
    }, {
      id: 'second',
      label: 'B'
    }, {
      id: 'c1',
      label: 'C1'
    }, {
      id: 'c2',
      label: 'C2'
    }, {
      id: 'd',
      label: 'D'
    }
  ]"
  [clusters]="[
    {
      id: 'third',
      label: 'Cluster node',
      childNodeIds: ['c1', 'c2']
    }
  ]"
  layout="dagreCluster"
>
  <ng-template #defsTemplate>
    // defs SVG here
  </ng-template>

  <ng-template #clusterTemplate let-cluster>
    // custer template
  </ng-template>

  <ng-template #nodeTemplate let-node>
    // node template
  </ng-template>

  <ng-template #linkTemplate let-link>
    // link template
  </ng-template>

  // Insert your custom SVG here
</ngx-graph>