SVG Ionic Angular 和外部脚本

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 将发出一个事件。这意味着要定义一个输出 EventEmitter；

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