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（＆＃39; path＆＃39;）选择了第一个组件的路径。

所以，关键是如何选择要应用的特定组件。我尝试使用document.evaluate（blah_，blah_，blah_，blah_，blah_）通过设置第一个blah_ = xpath但evaluate（）不包含。风格方法..

欢迎任何帮助！

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

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

1 个答案: