Angular2 - 当事件发射器不是事件目标时该怎么办？

Question

我想在鼠标悬停事件中获取 table 的行元素。问题是事件目标是光标下的 td 元素，而不是行元素本身。到目前为止，这与 angular 无关。这是一件 DOM 的事情。这是我的组件：

@Component({
 //....
 template: `
  <tr *ngFor="#row of rows;" (mouseover)="onRowHover($event)">
   <td *ngFor="#cell of row.cells">{{cell.value}}</td>
  </tr>`
 })
 export class Table {
  private onRowHover(event) {
   console.log("hover", event.target); //will print "hover <td>"
  }
 }

为了解决这个问题，我通常使用 'this' 获取行，这将是行元素：

<tr onmouseover="console.log("hover", this)"> <!-- Will print "hover <row>" -->

所以问题是：如何访问 Angular2 中的 'this' 或行元素？有没有类似的东西：

<tr ... (mouseover)="onRowHover($event, $this)" >

我现在的解决方法是获取 event.target 的父元素，这是合适的 tr 元素。

Answer 1

怎么样

 <tr #tr *ngFor="#row of rows;" (mouseover)="onRowHover(tr)"></tr>

Answer 2

console.log(event.path[0]);

returns鼠标经过的最内层元素

Angular2 - 当事件发射器不是事件目标时该怎么办？

Angular2 - What to do when event emitter is not the event target?

events

row

html-table

angular