En un proyecto de Angular, tengo un mapa SVG de un país, con todas sus regiones, y estoy tratando de poner este mapa SVG como plantilla de un componente.
Así que en el archivo SVG tengo cada región representada como <path> o <polygon , en total más de 70 regiones. Y uno de los requisitos es resaltar cada región en la que se hizo clic en un color determinado.
¿Hay alguna manera de manejar el evento de clic en cada región ( <path> y <polygon ), que no sea agregar el evento (click) en todos los 70 elementos <path> y <polygon , porque me parece mucho? repetición de código
Nota : aquí no puedo usar un bucle en los elementos SVG.
Lo he hecho agregando un evento de clic en cada elemento svg. Por supuesto, no debe hacerlo usted mismo, pero puede navegar programáticamente en sus elementos dom y agregar el evento de clic automáticamente.
No sé cómo es tu código, pero aquí un ejemplo:
<svg #mySvg></svg>en el componente.ts tal vez algo como esto debería funcionar:
@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 }); }Use ViewChild o ViewChildren según su caso de uso.
Esto es un poco pseudocódigo, pero debería ayudarlo a comenzar.
@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)) ) } }