Javascript Angular2 svg应用于错误的元素-传递xpath？

创建Angular2甜甜圈组件：

组件的HTML：

当我在main index.html中只使用一次时，它工作得相当好。问题是，当我在同一页中有多个页面时。假设我在一个页面中有三个组件，第二个或第三个组件上的onmouseover对第一个组件进行更改！我认为这是因为getElementsByTagName'path'选择了第一个组件的路径

因此，关键是如何选择要应用的特定组件。。我通过设置第一个blah=xpath尝试了document.evaluateblah，blah，blah，blah，blah，但是evaluate不包含.style方法

欢迎任何帮助

试试这个：

 <template  ngFor [ngForOf]="items" let-item let-i="index">
        <path  [attr.d]="item.d"
               (click)="segmentClick(i)"
               (mouseover)="segmentMouseOver($event,i)"
               [attr.fill]="item.color"                       
              /></template>

---

它确实有效，但使用event.currentTarget.style.fill而不是event.target。我想这取决于我使用的浏览器。无论如何，谢谢你！如何修改它以应用于svg中的特定元素？假设我更新了代码，在。我如何在这一特定区域应用样式？document.getElementsByTagName'h3'[1]。style.color=this.items[i]。高亮显示；将仅适用于第一个组件请参见此处angular不允许在svg中添加h3，但我使用了文本。可以使用的另一种方法是将元素作为ElementRef。So:constructorprivate _el:ElementRef{}，函数内部：this._el.nativeElement.getElementsByTagName'svg'[0].style.fill=this.items[i].color；

segmentMouseOver(i) {
        document.getElementsByTagName('path')[i].style.fill = this.items[i].highlight;
}

 <template  ngFor [ngForOf]="items" let-item let-i="index">
        <path  [attr.d]="item.d"
               (click)="segmentClick(i)"
               (mouseover)="segmentMouseOver($event,i)"
               [attr.fill]="item.color"                       
              /></template>

segmentMouseOver(event,i) {
       event.currentTarget.style.fill = this.items[i].highlight;
}