SVG 离子角度和外部脚本

Question

我的目标是检索svg的点击。

svg是一个带有一些<rect />的文件，其中包含要在app内导航的数据(app包装在electron模块中(。

所以，我找到了这样从svg调用外部javascript的好教程

内部svg

document.getElementById("svgroot").addEventListener("click", sendClickToParentDocument, false);
function sendClickToParentDocument(evt)
{
// SVGElementInstance objects aren't normal DOM nodes, so fetch the corresponding 'use' element instead
var target = evt.target;
if(target.correspondingUseElement)
target = target.correspondingUseElement;
// call a method in the parent document if it exists
if (window.parent.svgElementClicked)
window.parent.svgElementClicked(target);
else
alert("You clicked '" + target.id + "' which is a " + target.nodeName + " element");
}

在index.html

function svgElementClicked(target)
{
var s = document.getElementById("status");
s.textContent = "A <" + target.nodeName + 
"> element with id '" + target.id + 
"' was clicked inside the <" + 
target.ownerDocument.defaultView.frameElement.nodeName.toLowerCase() + 
"> element.";
}    

工作得很好，但我和Ionic和electron在一起，我需要在app内检索目标。

我试图在main.ts或任何.ts中移动外部函数，但我收到了警报(window.parent.svgElementClicked可能为空(。

我尝试传递一个全局变量，但同样的问题，该变量从未填充app.

那么，我该如何解决这个问题呢？

感谢您的帮助。

Answer 1

此代码不适用于 angular。

您必须按如下方式编辑 SVG 矩形：

在组件中定义 onClick((。 onClick 将发出一个事件。这意味着定义一个输出事件发射器;

一些阅读 ： https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html