Html 什么'；根据组件值在角度组件之间绘制线的最佳实践是什么？

我想用线条和文字连接A型和B型的不同角度（7）组件。这些线可以是水平线或对角线。类型A和B的组件之间的关系由组件C持有，该组件C存储A的ID、B的ID和需要在行上方显示的文本。至少A和B应该是响应组件，而不是静态图像。 我在父显示组件中使用ngFor创建As和Bs。然后我必须迭代Cs来画线。这意味着多个问题： 1.在组件之间用文本绘制这样的线的最佳实践是什么？ 2.如何获取组件A和B的位置？我读到在angular中查询DOM是不好的做法

根据我的发现： Canvas：据我所知，Canvas的问题是，一旦创建，它就是一个静态图像。但我需要查询我的As和Bs位置来绘制Cs。 SVG：我可以使用SVG创建带有文本的线条，但我不确定这是否是一种好方法，因为主要问题是连接我的自定义组件a和B：一种方法是在SVG中绘制As和Bs，而另一种方法是在As和Bs的“列”之间绘制SVG图像，只显示线条。无论如何，我必须承认我已经不知所措，所以我想确保进入正确的设计方向

@Component({
  selector: 'app-a',
  templateUrl: './a.component.html',
  styleUrls: ['./a.component.css']
})
export class AComponent implements OnInit {

    @Input() a: A;

  constructor() { }

  ngOnInit() {
  }

}

显示html：

<div class="frame">

<div class="as" [style.grid-area]="'as'">
     <app-a id="{{ a.id }}" *ngFor="let a of as" [a]="a"></app-a>
</div>
<div class="bs" [style.grid-area]="'bs'">
     <app-b id="{{ b.id }}" *ngFor="let b of bs" [b]="b"></app-b>
</div>

<!-- Draw line now for every c of cs between corresponding a and b -->

</div>

实际：

A1        B1



A2        B2

预期：

A1 --10-- B1
        /
     20
   /  
A2        B2

---

有很多第三方库可以解决这个问题。如果你很难理解自己是如何做到这一点的，我建议你看看其中的一个。对于初学者来说，这是一个棘手的问题。快速的谷歌搜索发现：我终于找到了一个框架解决方案：。它有很好的文档、插图和可用性。

export class C{
    aID: string;
    bID: string;
    value: string;
}

@Component({
  selector: 'app-display',
  templateUrl: './display.component.html',
  styleUrls: ['./display.component.css']
})
export class DisplayComponent implements OnInit {

    @Input() as: A [] = [];
        @Input() bs: B [] = [];
        @Input() cs: C [] = [];

  constructor() { }

  ngOnInit() {
  }

}

<div class="frame">

<div class="as" [style.grid-area]="'as'">
     <app-a id="{{ a.id }}" *ngFor="let a of as" [a]="a"></app-a>
</div>
<div class="bs" [style.grid-area]="'bs'">
     <app-b id="{{ b.id }}" *ngFor="let b of bs" [b]="b"></app-b>
</div>

<!-- Draw line now for every c of cs between corresponding a and b -->

</div>

.frame {
    display: grid;
    grid-template-areas: "as cs bs";
    grid-template-rows: auto auto auto;
    grid-row-gap: 16px;
    grid-column-gap: 16px;
}

A1        B1



A2        B2

A1 --10-- B1
        /
     20
   /  
A2        B2