如何启用单击 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>

我得到的错误是

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

我的 OnClick 功能如下

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

将不胜感激任何指针来解决这个问题。

Answer 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()"/>