Angular中routerLinkActive对所有锚点链接生效，如何仅点击对应链接激活？

问题说明 #

给页面头部的锚点链接添加routerLinkActive后，所有链接都被加上了激活样式。原因是所有链接的routerLink都指向根路径''，Angular的routerLinkActive默认只匹配路由路径，不区分锚点（fragment），导致所有链接都判定为激活状态。需要实现仅点击对应锚点链接时才激活样式。

解决方案 #

因为routerLinkActive默认不处理锚点，所以可以通过手动绑定样式类结合路由URL判断来实现精准激活，以下是最简单直接的实现方式：

步骤1：组件类注入Router #

在对应组件的.ts文件中导入并注入Router（设为public方便模板直接访问）：

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
  constructor(public router: Router) {}
}

步骤2：修改HTML模板的样式绑定 #

把原来的routerLinkActive替换为[class.active-link]，通过判断当前URL是否包含对应锚点来控制样式：

<ul class="nav-links">
  <li class="nav-link-item">
    <a class="header__link" routerLink="" fragment="home" [class.active-link]="router.url.includes('#home')">
      {{ 'home' | transloco }}
    </a>
  </li>
  <li class="nav-link-item">
    <a class="header__link" routerLink="" fragment="services" [class.active-link]="router.url.includes('#services')">
      {{ 'ourServices' | transloco }}
    </a>
  </li>
  <li class="nav-link-item">
    <a class="header__link" routerLink="" fragment="domestic-product" [class.active-link]="router.url.includes('#domestic-product')">
      {{ 'domesticProduct' | transloco }}
    </a>
  </li>
  <li class="nav-link-item">
    <a class="header__link" routerLink="" fragment="we-offer" [class.active-link]="router.url.includes('#we-offer')">
      {{ 'whatWeOffer' | transloco }}
    </a>
  </li>
</ul>

可选：保留routerLinkActive的扩展写法 #

如果想继续使用routerLinkActive，可以在组件类中自定义判断方法：

// 组件类中添加方法
isActive(fragment: string): boolean {
  return this.router.url.includes(`#${fragment}`);
}

模板中对应写法：

<a class="header__link" 
   routerLink="" 
   fragment="home" 
   routerLinkActive="active-link"
   [routerLinkActiveOptions]="{ exact: true }"
   [isActive]="isActive('home')">
  {{ 'home' | transloco }}
</a>

路由配置无需修改 #

原路由配置保持不变即可：

import { Routes } from '@angular/router';
import { HomeComponent } from './main-layout/pages/home/home.component';
import { NotFoundPageComponent } from './shared/components/not-found-page/not-found-page.component';

export const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'error', component: NotFoundPageComponent },
  { path: '**', redirectTo: 'error' },
];

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