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>

我在我的 ngOninit 中调用这个 id biharsvg 使用这个代码：

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()
    }
 })

一切正常我在点击时收到警告消息。我正在尝试在该单击事件中使用我的服务功能当我在 addEventListener 外部添加 this.SvgService.barchart() 时它正在工作但是当我在 addEventListener 的 onclikc 中添加它时我收到错误。

我的第一个错误是在可视化代码中：

[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

addEventListener()方法中的this指的是触发事件的元素。

您需要将 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()
    }
 })

Angular 6 在ngOninit中调用服务函数

Angular 6 call service function inside ngOninit

svg

typescript

angular6