Angular 6 svg在点击时将类添加到路径答案

【问题标题】：Angular 6 svg add class to path on clickAngular 6 svg在点击时将类添加到路径
【发布时间】：2018-06-01 12:20:57
【问题描述】：

我正在尝试在 Angular onclick 事件中将类添加到我的 svg 地图中：我有一个工作代码，它在 ngOnInit() 中工作，但是当我在点击事件函数中添加相同的代码时，它不起作用：

我的 ngOnInit 代码是：

   ngOnInit() {

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

         a.addEventListener("load", function() {
              var svgDoc = a.contentDocument;
              var wchamparan = svgDoc.getElementById("wchamparan");

               console.log(wchamparan);

              wchamparan.onclick = function() {
               alert("hello");
                }
     })
}

这段代码运行良好，我可以看到日志，但是当我在一个按钮的点击事件中执行此操作时，其代码为：

 click() {

 alert("hello");

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

 // var wchamparan = svgDoc.getElementById("wchamparan");
 // element.classList.add("mystyle");
    a.addEventListener("load", function() {
         let svgDoc = a.contentDocument;
         let wchamparan = svgDoc.getElementById("wchamparan");
         wchamparan.classList.add("mystyle");

         console.log("hello");
})
}

在这里我可以看到警报消息我也可以看到里面有什么但是 a.addEventListener("load", function() 我什么都看不到。为什么这不起作用 ngOnInit() 之间有什么区别和 onclick 函数。这段代码有什么问题。

【问题讨论】：

标签： jquery svg click angular6

【解决方案1】：

当我删除 addEventListener 时，我尝试了很多方法让它工作，然后它工作了，所以我的解决方案代码是：

appendToContainer() {
let map = document.getElementById("biharsvg") as HTMLObjectElement;
let svgDoc = map.contentDocument; // should be fine
let echamparan = svgDoc.getElementById("echamparan");
echamparan.classList.add("mystyle");
console.log(echamparan);
}

所以问题是我猜想添加事件监听器。

【讨论】：