如何在angular2中启用单击svg行

时间:2017-01-24 06:10:00

标签: angular svg onclick line

我有一条通过svg绘制的线,我需要捕获它上面的click事件。但是,当我将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>

我得到的错误是

未捕获的ReferenceError:未定义OnClick     在SVGLineElement.onclick(:3000 /#/ app / tables / tablelist / tableedit / 1:1)

我的OnClick功能在

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

非常感谢您解决此问题的任何指示。

1 个答案:

答案 0 :(得分:1)

角度事件绑定是(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()"/>