Question

你好

是否可以在一个SVG的不同元素中制作routerLink Angular 6？

<svg  width="256.53mm" height="269.27mm" version="1.1" viewBox="0 0 256.53 269.27" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

 <g  transform="translate(22.348 -13.007)" fill="none" stroke="#000" stroke-width=".26458px">
    <path (click)="goBalises()" id="gauche" d="m142.13 129.55 90.991-30.211 0.92948 103.56-91.145-25.734z"/>
    <path id="haut" d="m83.534 104.61-28.726-91.47 103.57 0.75595-27.214 90.714z"/>
    <path id="droite" d="m69.467 174.31-91.088 29.916-0.59389-103.57 91.061 26.03z"/>
    <path id="bas" d="m130.05 190.78 29.533 91.213-103.57 0.15841 26.412-90.951z"/>
 </g>
</svg>

goBalises(){
    this.router.navigate(['/balises']);
  }

谢谢

Answer 1

我发现做到这一点的一种方法是向svg添加数据属性，并在Angular中动态分配onclick事件（注意svg中的data-link而不是(click)，我还添加了一个wrapper div，但您不一定需要它，在这种情况下，请将#imageContainer直接添加到svg标记中）

<div #imageContainer>
    <svg  width="256.53mm" height="269.27mm" version="1.1" viewBox="0 0 256.53 269.27" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

     <g  transform="translate(22.348 -13.007)" fill="none" stroke="#000" stroke-width=".26458px">
        <path data-link='balise' id="gauche" d="m142.13 129.55 90.991-30.211 0.92948 103.56-91.145-25.734z"/>
        <path id="haut" d="m83.534 104.61-28.726-91.47 103.57 0.75595-27.214 90.714z"/>
        <path id="droite" d="m69.467 174.31-91.088 29.916-0.59389-103.57 91.061 26.03z"/>
        <path id="bas" d="m130.05 190.78 29.533 91.213-103.57 0.15841 26.412-90.951z"/>
     </g>
    </svg>
</div>

然后在Angular组件中，获得容器div，并检查所有具有data-link属性的元素，然后将click事件侦听器绑定到所需的内容。

export class SvgImage {
    @ViewChild('imageContainer', {static: false}) container: ElementRef<HTMLElement>;

    initLinks() {
        if (!this.container || !this.container.nativeElement) {
          return;
        }

        var links = this.container.nativeElement.querySelectorAll('[data-link]');

        links.forEach(val => {
          var converted = <HTMLElement>val;
          converted.addEventListener('click', () => {           
            this.router.navigate([link]);
          });
        });
    }
}

如何在SVG路径内使用routerLink？

1 个答案: