Angular 6 вызова сервисной функции внутри ngOninit

Question

Я пытаюсь запустить службу внутри ngOninit, но получаю ошибку.У меня есть карта SVG, и я вызываю элементы карты, используя:

 let a = document.getElementById("biharsvg")  as HTMLObjectElement;

В моем файле component.html я добавляю этот код, чтобы получить карту SVG:

<object data="assets/img/bihar.svg" id="biharsvg" type="image/svg+xml"></object>

И яя вызываю этот идентификатор biharsvg в моем ngOninit, используя этот код:

let a = document.getElementById("biharsvg")  as HTMLObjectElement;
   a.addEventListener("load", function() {
      var svgDoc = a.contentDocument;
      var wchamparan = svgDoc.getElementById("wchamparan");
      wchamparan.onclick = function() {
      alert("hello");
      this.SvgService.barchart()
    }
 })

Все работает нормально, я получаю предупреждение по клику.Я пытаюсь использовать функцию моего сервиса внутри этого события click. Когда я добавляю this.SvgService.barchart () за пределами addEventListener, он работает, но когда я добавляю это внутри onclikc из addEventListener, я получаю ошибку.

Мой первыйошибка внутри визуального кода:

[ts] Property 'SvgService' does not exist on type 'HTMLElement'.
any

И внутри консоли я получаю это:

Uncaught TypeError: Cannot read property 'barchart' of undefined

Редактировать, когда я использую этот код:

this.SvgService.barchart()

внутриonInit это работает проблема возникает только когда я пытаюсь добавить это внутри onclick или addEventListener

Что мне делать в этом случае:

Answer 1

this внутри метода addEventListener() относится к элементу, из которого было инициировано событие.

Вам необходимо скопировать class ссылку this в другую переменную (что-то вроде that) и использовать внутри addEventListener()

const that = this;
let a = document.getElementById("biharsvg")  as HTMLObjectElement;
   a.addEventListener("load", function() {
      var svgDoc = a.contentDocument;
      var wchamparan = svgDoc.getElementById("wchamparan");
      wchamparan.onclick = function() {
      alert("hello");
      that.SvgService.barchart()
    }
 })