如何将 angular 2 事件绑定到 svg 对象？答案

【问题标题】：How do I bind an angular 2 event to an svg object?如何将 angular 2 事件绑定到 svg 对象？
【发布时间】：2017-07-03 08:09:55
【问题描述】：

我有以下html：

<svg:g *ngFor='let knob of knobs' >
    <svg:path id="arc1" fill="blue" stroke="#446688" stroke-width="1"  
     fill-rule="nonzero" draggable="true" [attr.d]="knob"  
     (drag)="dragKnob(event)" class="draggable"/>
</svg:g>

还有脚本：

dragKnob(event: Event): void {
    console.log(event);
}

结果是它不执行dragKnob。如果我改为使用（单击）它会按预期工作。

有什么想法吗？

【问题讨论】：

标签： javascript angular svg

【解决方案1】：

SVG 元素不支持拖动事件：

http://www.w3.org/TR/SVG/svgdom.html#RelationshipWithDOM2Events.

如果您想在拖动对象时做某事，请改用 (mousemove)。

(mousemove)="dragKnob(event)"

这应该写入控制台：

dragKnob(event: Event): void {
    console.log(event);
}

【讨论】：

谢谢@Yaser，这就是问题所在！我结合 mousedown、mouseup 和 mousemove 修复了它

【解决方案2】：

只需将此事件放在 HTML 上，然后在里面编写函数，例如 'drag()'

  <svg id="robot" version="1.1" viewBox="70 150 150 220" pointer-
     events="visibleFill" 
        **(mouseover)="drag($event)"  
        (mouseleave)="leave($event)"
        (mousedown)="grab($event)" 
        (mouseup)="drop($event)"** 

        class="scaling-svg   robotPath"  >

【讨论】：