将SVG作为<object>导入时如何处理其中的onclick事件在Angular组件中

Question

我正在努力应对这个问题，但似乎我失去了所有的想法。

在 Angular 组件中，我正在从外部资源加载 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上的单击事件？

我尝试将onClickArea注册在window对象上，但它不起作用。

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

- Haris Hajdarevic

---

你的代码应该像 这个 stackblitz 中展示的那样工作（该方法也可以在类构造函数中定义）。请注意，在你的代码示例中，onclick 结尾处缺少一个 "。 - ConnorsFan

@ConnorsFan 在你的例子中，这将起作用，但在我的例子中，包含 onclick 事件的 <g> 标签并不直接添加在 Angular HTML 文件中。它们被导入为 <object>，其中 SVG 的内容包含这些 onclick 事件，我无法在 Angular 组件中捕获它们。 - Haris Hajdarevic

如果您可以控制SVG内容，请尝试使用onclick="top.onClickArea('hello', 3)"，如此stackblitz所示。原始代码的stackblitz在这里，但必须在完整窗口模式下执行。 - ConnorsFan

Answer 1

您可以像这样为元素添加点击事件：

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

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

以下是一个 StackBlitz 链接，它执行相同的操作：当点击 g 标签时，您将获得事件。

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

- Amrit

---

在这种情况下，“your_html”是什么？ - Haris Hajdarevic

document.getElementsByTagName("g") 返回一个空的 HTMLCollection 数组。原因是我使用<object>而不是像上面的例子中一样使用<svg>来加载SVG。因为据我所知，<object>在DOM中创建了类似于iframe的东西。你能否尝试一下你的示例，其中SVG是从外部资源加载的<object>？@Amrit - Haris Hajdarevic

我认为将 var elements= document.getElementsByTagName("g"); 中的 "g" 替换为 "object" 应该可以解决问题。 - Amrit