Question

我正在尝试在ngOninit中运行服务但是我收到错误。我有一个svg地图，我使用以下方法调用地图元素：

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

在我的component.html文件中，我添加此代码以获取svg map：

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

一切正常我正在收到警报消息onclick。我正在尝试在click事件中使用我的服务功能当我在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

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

ngOninit中的Angular 6调用服务函数

1 个答案: