Я использую компонент графика SVG в Angular, который отображает узлы со связями между ними. В конце ссылка имеет стрелку. Это прекрасно работает. Однако, если я создаю два или более экземпляров компонента графика, стрелки появляются только на первом графике.
Если посмотреть на синтаксис html, на всех графиках есть шаблоны стрелок и путей. Я подумал, может быть, это связано с тем, что стрелкам нужны уникальные идентификаторы, а при создании нескольких экземпляров существует много маркеров стрелок с одинаковым идентификатором.
Итак, я попытался сделать динамический идентификатор с помощью Angular, однако в этом случае стрелка не отображалась, хотя id и end-маркера находятся в html. Код показывает, как отображается график.
Есть идеи, почему стрелки появляются только в первом экземпляре графика?
<ngx-graph [links]="links" [nodes]="nodes">
<ng-template #nodeTemplate let-node>
<svg:g class="node"></svg:g>
</ng-template>
<ng-template #linkTemplate let-link>
<svg:g class="edge">
<svg:marker id="arrow" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4" orient="auto">
<svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
</svg:marker>
<svg:path [attr.marker-end]="url(#arrow)">
</svg:path>
</svg:g>
</ng-template>
</ngx-graph>
Вот код с динамическими идентификаторами, идентификаторыпечатаются правильно в дереве dom, но в этом случае ни одна стрелка не отображается:
<ng-template #linkTemplate let-link>
<svg:g class="edge">
<svg:marker id="{{link.id}}" viewBox="0 -5 10 10" refX="8" refY="0" markerWidth="4" markerHeight="4"
orient="auto">
<svg:path d="M0,-5L10,0L0,5" class="arrow-head" />
</svg:marker>
<svg:path [attr.marker-end]="'url(#'+ link.id +')'">
</svg:path>
</svg:g>
</ng-template>