如何在Angular2中启用对SVG线条的点击

Question

我在svg中画了一条线，并需要捕捉点击事件。但是当我把onclick设置为一个函数时，会出现错误。

 <div id ="middle" class="col-lg-2 col-xs-3">  
      <svg width="300" height="2000" xmlns="http://www.w3.org/2000/svg">  
             <line id="line2"   [attr.x1]= "from_x0"   
              [attr.y1]="from_y0"  [attr.x2]="to_x"  
              [attr.y2]="to_y" stroke-width="2" stroke="green" 
              onclick ="OnClick()"//>
     </svg>
</div>

我遇到的错误是：未捕获的引用错误：OnClick未定义，位置在SVGLineElement.onclick (:3000/#/app/tables/tablelist/tableedit/1:1)。

以下是我的OnClick函数：

OnClick (){
  console.log('clicked on line')
}

希望能得到指点解决此问题。

- sv16

Answer 1

Angular事件绑定是通过(event)="..."实现的。

<line id="line2"   [attr.x1]= "from_x0" [attr.y1]="from_y0"   
 [attr.x2]="to_x" [attr.y2]="to_y" stroke-width="2" stroke="green"   
 (click)="OnClick()"/>

- Günter Zöchbauer

---

抱歉，我之前尝试过了，但可能犯了一些愚蠢的错误。现在它已经可以正常工作了。 - sv16

没关系，这种情况经常发生 :D。很高兴听到你能够解决它。 - Günter Zöchbauer

这对我仍然没有用，当点击路径时 :-( - Mawg says reinstate Monica