带SVG的Angular 2模板<；textPath>；xlink:ref属性未引用关联的<；路径>；通过ID

我有一个Angular 2+组件，它的模板中有SVG，并且运行良好

template: `
<svg:path class="OutlineSegment" [attr.d]="svgPath" id="outlineSegmentPath"></svg:path>
<svg:text class="DartDistanceOnSeam">
    <svg:textPath alignment-baseline="top" xlink:href="#outlineSegmentPath">
       {{ length | number: '1.2-2' }} {{ displayUnit }}
    </svg:textPath>
</svg:text>
`

模板：`
{{length | number:'1.2-2'}{{{displayUnit}}
`

唉，对于组件的所有实例，所有文本都沿着相同的路径呈现，因为它们似乎引用了相同的#outlineSegmentPath

我似乎无法针对在该组件中创建的特定路径。当然，路径的ID属性在模板中是静态的

---

我是否需要自己生成唯一的id，或者它们是在组件中编织id和xlink:href引用的一种有角度的方式？

我通过生成自己的id以在path和textPath标记中呈现来解决这个问题。我使用UUID

private _id: string;
get id(): string { 
    if (!this._id) {
      this._id = UUID.UUID();  // from from 'angular2-uuid'
    }
    return this._id;
}
get hashId(): string {
  return `#${this.id}`;
}

在模板中：

<svg:path [attr.d]="svgPath" [attr.id]="id"></svg:path>
<svg:text dy="-4">
    <svg:textPath [attr.xlink:href]="hashId">
        {{ length | number: '1.1-1' }} {{ displayUnit }}
    </svg:textPath>
</svg:text>

{{length | number:'1.1-1'}{{{displayUnit}}

不成角度，但也不回答或回答您的问题？这将讨论这个问题。这似乎是一个需要自食其力的解决方案。也许是UUID。