Question

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

svg是包含一些<rect />的文件，其中包含要在app内部导航的数据，（app模块中包含的electron。< / p>

所以，我找到了一个很好的教程，可以通过这种方式调用来自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可能为null）。

我试图传递一个全局变量，但同样的问题，该变量永远不会填入app。

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

感谢您的帮助。

Answer 1

此代码不适用于角色。

你必须编辑你的svg rects如下：

在组件中定义onClick（）。 onClick将发出一个事件。这意味着定义一个Ouput EventEmitter;

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

SVG Ionic Angular和外部脚本

1 个答案: