Как лучше всего проводить линии между угловыми компонентами на основе значений компонентов? - PullRequest
Новая
       15

Как лучше всего проводить линии между угловыми компонентами на основе значений компонентов?

0 голосов
/ 03 июля 2019

Я хочу соединить различные угловые (7) компоненты типа A и B со строками и текстом. Линии могут быть горизонтальными или диагональными. Отношение между компонентом типа A и B поддерживается компонентом C, который хранит идентификатор A, идентификатор B и текст, который должен отображаться над строкой. По крайней мере, A и B должны быть отзывчивыми компонентами, а не статичным изображением. Я создаю As и Bs с ngFor в родительском компоненте отображения. Тогда мне придется перебирать Cs, чтобы нарисовать линии. Это подразумевает множество проблем: 1. Как лучше всего проводить такие линии с текстом между компонентами? 2. Как я могу получить положения компонентов A и B? Я читал, что опрашивать DOM - это плохая практика в angular.

Из того, что я нашел: Холст: Насколько я понял, проблема с холстом заключается в том, что он - однажды созданный - статичное изображение. Но мне нужно запросить мою позицию As и Bs, чтобы нарисовать Cs. SVG: я могу создать строку с текстом, используя svg, но я не уверен, что это хороший подход, потому что основная проблема - это соединение моих пользовательских компонентов A и B: одним из способов может быть рисование As и B в SVG, в то время как другим будет изображение SVG между «столбцами» для As и B, отображающее только строки. В любом случае я должен признать, что я поражен, поэтому я хочу быть уверенным, чтобы двигаться в правильном направлении дизайна. 

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

    @Input() a: A;

  constructor() { }

  ngOnInit() {
  }

}

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

    @Input() b: B;

  constructor() { }

  ngOnInit() {
  }

}

export class A{
    id: string;
}

export class B{
    id: string;
}

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() {
  }

}

Показать 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>

дисплей css: 

.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
...