Question

我为此感到挣扎，似乎我放弃了所有想法。

在角度组件中，我从外部资源加载SVG，

<object type="image/svg+xml"  [data]="svgURL"></object>

已加载的SVG对象包含类似以下项：

<g onclick="onClickArea(evt,'3')></g>

因此，当我单击SVG特定区域时，出现错误：

0276a76ee45640eba80002580a126a38:158 Uncaught ReferenceError: onClickArea is not defined
    at SVGGElement.onclick

是否可以以及应该如何在Angular组件中注册onClickArea函数并侦听SVG上的onclick事件。

我试图在窗口对象上注册onClickArea，但是它不起作用。

(<any>window).onClickArea = function() {
    console.log('test');
};

Answer 1

您可以像这样将click事件添加到元素：

var elements= document.getElementsByTagName("g");

for(var i=0; i<elements.length; i++){
    elements[i].addEventListener("click", (event: Event) => {
            alert("click event");
        });
}

下面是一个stackBliz链接，该链接的作用相同：单击g标签将获得事件

https://stackblitz.com/edit/hello-angular-6-izqcuz?file=src/app/app.component.html

导入的SVG作为<object>包含onclick事件，如何在Angular组件中处理它们

1 个答案: