Angular 如何控制SVG模板（点击事件）

Question

在一个 Angular 项目中，我有一个国家的 SVG 地图，包括它的所有区域，我正在尝试将此 SVG 地图作为组件的模板。

所以在 SVG 文件中我将每个区域表示为 <path> 或 <polygon 元素，总共超过 70 个区域。其中一个要求是用某种颜色突出显示每个点击区域。

有没有办法处理每个区域（<path> 和 <polygon 元素）的点击事件，而不是在所有 70 个 <path> 和 <polygon 元素，因为这对我来说似乎有很多代码重复

注意：这里我不能在 SVG 元素上使用循环。

Answer 1

我已经在每个 svg 元素上添加了一个点击事件。当然你不应该自己做，但你可以在你的 dom 元素中以编程方式导航并自动添加点击事件。

我不知道你的代码是怎样的，但这里有一个例子：

<svg #mySvg></svg>

在 component.ts 中也许像这样的东西应该有效：

@ViewChild('mySvg') mySvg: SVGElement;

// other code

const children = this.mySvg.children;
for (var i = 0; i < children.length; i++) {
  const childElement = children[i];
  childElement.addEventListener('click', function (e) {
  // Do stuff
  });
}

Answer 2

根据您的 use-case 使用 ViewChild 或 ViewChildren。

这有点pseudo-codeish，但它应该可以帮助您入门。

@Component({
  ...
  template: `<svg #map>...<svg>`
})
export class MapComponent implements AfterViewInit {
  @ViewChild('map') map: HTMLElement // or SvgHTMLElement counterpart

  @HostListener('click')
  onMapComponentClicked(event: MouseEvent) {    
    const clickedElement = this.getClickedSvg(event)
    if(!clickedElement) return
    
    // Do something with the clicked SVG; maybe read it's ID
  }

  private getClickedSvg(event: MouseEvent): HTMLElement? {
    return ( 
      Array.from(this.map.children).find(el => el.contains(event.target))
    )
  }

}

Angular 如何控制SVG模板（点击事件）

How to control SVG template (click events) in Angular

javascript

frontend

svg

typescript

angular