Импортированные SVG как <object>содержат события onclick, как их обрабатывать в компоненте Angular.

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

Возможно ли и как это сделать, чтобы зарегистрировать функцию onClickArea в компоненте Angular и прослушивать события onclick в SVG.

Я пыталсязарегистрировать onClickArea в объекте окна, но он не работает.

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

Answer 1

Вы можете добавить событие клика к элементу, например так:

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