Question

我有一个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>
`

唉，所有文本都是在组件的所有实例的相同路径上呈现的，因为它们似乎引用了相同的#outlineSegmentPath。

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

我是否需要自己生成唯一ID，或者是一种Angular方式将ID和xlink：href引用组合在一起？

Answer 1

我通过生成自己的id来在路径和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>

具有SVG <textpath> xlink：ref属性的Angular 2模板未通过ID引用关联的<path>

1 个答案: