Angular 6 svg 添加 class 点击路径

Question

我正在尝试在 angular onclick 事件中将 class 添加到我的 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函数的区别，这段代码有什么问题

Answer 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);
}

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

Angular 6 svg 添加 class 点击路径

Angular 6 svg add class to path on click

jquery

svg

click

angular6