在angular 5中，在运行时将click事件绑定到svg路径集合

在Angular 5项目中，我试图将单击事件绑定到动态加载的svg对象的每个路径。我已使用以下代码成功地将单击事件绑定到一个path元素：

constructor(private elemRef: ElementRef) { } 

mapEventInit() {
        this.elemRef.nativeElement.querySelector('.country')
        .addEventListener('click', this.onClick.bind(this));
}  
onClick(event) {
        console.log(event.target.id);
}

问题是querySelector只允许我绑定到.country类元素集合中的第一个元素是否有一种合适的“角度”方法来实现这一点，或者我应该只使用常规字体，如下所示

const pathCollection = document.querySelectorAll('.country');
for (let i = 0; i < pathCollection.length; i++) {
  pathCollection[i].addEventListener('click', function(event) {
    console.log(this.id);
  });
}

constpathcollection=document.querySelectorAll（“.country”）；
for（设i=0；i

您应该采取的方法是：将事件监听器添加到父（对于路径）svg元素，单击check event.target确定接收到clickIf的路径您需要实际代码的帮助-共享您的代码片段（至少是模板snd组件）