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

Question

创建一个Angular2甜甜圈组件:

组件的HTML：

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

组件的.ts代码:

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

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

所以，重点是如何选择要应用的特定组件..我尝试了使用文档。通过设置第一个blah_＝xpath来计算（blah_，blahU，blah _，blah，_），但evaluate（）不包含.style方法。。

欢迎任何帮助!

Answer 1

试试这个 ：

 <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>

ts：

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