Angular svg：标记箭头不总是显示

我在Angular中使用一个SVG图形组件，它显示节点之间的链接。链接的末端有一个箭头。这很有效。但是，如果创建两个或多个graph组件实例，则箭头仅出现在第一个graph中

如果我看一下html语法，所有的图都有箭头和路径模板。我想这可能与箭头需要唯一的id有关，当制作多个实例时，有许多箭头标记具有相同的id

因此，我尝试在Angular的帮助下使id动态化，但是在这种情况下，即使id和标记端在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>

下面是带有动态id的代码，id被正确地打印到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>

带有固定id的模板几乎总是会遇到麻烦。在一个文档中，所有ID都必须是唯一的，所以您只能在这里创建一个有效的标记。但我不能用这种方法来解决你的问题。你能提供一个演示吗？嗨@Arctezy提供一个演示有点棘手，因为我的解决方案相当复杂。但基本上我只是想在同一个dom树中显示两个组件。问题是当我这样做的时候，另一个图形不会在直线上显示箭头。不确定这是svg还是ngx图形组件中出现的错误。您好@RobertLongson谢谢您的建议，我实际上尝试了动态id，请参阅更新的代码示例，但没有成功。假设问题与其他事情有关，还有其他建议吗？