Angular应用中如何在首页路由切换时将SVG图标改为实心样式？

你需要调整isActive方法的逻辑，来正确识别空路径（''）的首页路由状态，同时确保传入方法的参数是正确的路由路径（而非class字段，这样逻辑更统一）。

步骤1：修正模板中的调用参数 #

首先，将模板中isActive的调用参数从data[index].class改为data[index].href，因为routerLink已经绑定了该字段，确保判断的是当前按钮对应的路由：

<img
  [src]="
    isActive(data[index].href) ? data[index].srcActive : data[index].src
  "
  alt="{{ data[index].alt }}"
  class="container__svg {{ data[index].class }}" />

步骤2：修改isActive方法逻辑 #

Angular中空路径''对应的实际URL是/，所以需要在方法中处理这种匹配情况：

isActive(route: string): boolean {
  // 标准化路由：空路径转为/，确保和实际URL一致
  const normalizedRoute = route === '' ? '/' : route;
  return this.router.isActive(normalizedRoute, {
    paths: 'exact',
    queryParams: 'ignored',
    fragment: 'ignored',
    matrixParams: 'ignored',
  });
}

替代方案：直接通过router.url判断 #

如果你觉得router.isActive的配置太繁琐，也可以直接对比当前URL：

isActive(route: string): boolean {
  const currentUrl = this.router.url;
  // 空路径匹配/或''
  if (route === '') {
    return currentUrl === '/' || currentUrl === '';
  }
  // 其他路由精确匹配
  return currentUrl === route;
}

这样修改后，当你处于首页路由（路径''）时，对应的按钮会触发isActive返回true，从而切换到激活状态的SVG图标。

内容的提问来源于stack exchange，提问作者StrangerFromTheVoid