如何在 SVG 路径中使用 routerLink？答案

【问题标题】：How to use routerLink inside SVG path?如何在 SVG 路径中使用 routerLink？
【发布时间】：2019-01-07 17:06:44
【问题描述】：

你好

有没有办法在一个 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']);
  }

谢谢

【问题讨论】：

标签： angular svg routerlink

【解决方案1】：

我发现这样做的一种方法是向 svg 添加一个 data 属性并在 Angular 中动态分配 onclick 事件（注意 svg 中的 data-link 而不是 (click)，我还添加了一个包装 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]);
          });
        });
    }
}

【讨论】：

【解决方案2】：

为了补充@carak 的答案，考虑@Sajeetharan 在这里指出的内容很有用：I'm getting "Property 'router' does not exist on type 'SigninComponent'." while using this.router.navigate(['/dashboard']); in angular 4

"你需要在构造函数内部按如下方式传递，

constructor(private router: Router){
}

还要确保您已按如下方式导入路由器

import { Router } from '@angular/router';

【讨论】：