ngOninit 中的 Angular 6 调用服务函数答案

【问题标题】：Angular 6 call service function inside ngOninitngOninit 中的 Angular 6 调用服务函数
【发布时间】：2018-11-14 15:25:58
【问题描述】：

我正在尝试在 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 中添加它时才会出现工作问题

这种情况我该怎么办：

【问题讨论】：

在调用addEventListener()时使用箭头函数而不是普通函数。
你能解释一下我应该在哪里以及如何添加 addEventListener()。 ——
查看Typescript Tutorial 了解更多关于使用箭头函数的好处。在这里， this 范围不同，因此找不到您的对象。 “之所以可行，是因为箭头函数从函数体外部捕获了对 this 的引用。”
@MatthiasSommer 你能说得更具体点吗？我无法在点击事件中调用我的服务函数
试试这个a.addEventListener("load", () => { var svgDoc = a.contentDocument; var wchamparan = svgDoc.getElementById("wchamparan"); wchamparan.onclick = () => { alert("hello"); this.SvgService.barchart() }

标签： typescript svg angular6

【解决方案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()
    }
 })

【讨论】：

这是有效的，您能否再添加一件事我正在尝试在服务中执行此操作我正在更新问题。只是帮助