Question

我正在使用Ionic中的应用程序2.从JSON文件中读取有关乐器键盘的数据，我动态地将圆形对象添加到svg，这是在instrument-detail.html中实现的 - 文件。这在instrument-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);

现在我想在触摸时向圆圈添加一些动作，在instrument-detail.ts中调用方法doSomething（）。

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

我认为，

不起作用，我知道为什么......

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

导致运行时错误：

Uncaught ReferenceError: doSomething is not defined at SVGCircleElement.onclick

知道如何解决我的问题吗？如何正确地解决方法？

提前谢谢！

Answer 1

找到解决方案：添加eventlistener：

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

                      }, false);

在Ionic 2中动态添加SVG，如何添加onclick-function？

1 个答案: