在Ionic 2中动态添加SVG，如何添加onclick函数？

Question

我正在研究Ionic 2中的一个应用程序。从JSON文件中读取有关乐器键盘的数据，我动态地将圆对象添加到svg中，这是在instrument-detail.html文件中实现的。这在仪器detail.ts正常工作：

var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); 
circle.setAttribute('id', this.keyIndex.toString()); 
circle.setAttribute('cx', posX.toString()); 
circle.setAttribute('cy', posY.toString()); 
circle.setAttribute('r', radius.toString()); 
circle.setAttribute('class', 'buttonStandard'); 
svg.appendChild(circle); 

现在我想触摸时的一些操作添加到圈子里，调用一个方法DoSomething的（）在仪器detail.ts。

circle.setAttribute('class', '(click)="doSomething()"'); 

不工作，我想，我知道为什么...

circle.setAttribute('class', 'onclick="doSomething()"'); 

导致了运行时错误：

Uncaught ReferenceError: doSomething is not defined at SVGCircleElement.onclick 

不知道如何解决我的问题？如何正确解决该方法？

预先感谢您！

Answer 1

实测值的溶液： 添加一个事件监听：

circle.addEventListener("click", function() {   // Attach desired event 
          let myId= this.id.split('_')[0]; 
          alert(myId+": Moving to page #"+myId); 

         }, false);