Angular点击子路由时父链接切换不同routerLinkActive样式方法

Angular的routerLinkActive指令默认采用URL前缀匹配规则，根路径/会匹配所有以/开头的子路由地址，因此访问/box、/pageone等子路由时，绑定了routerLink="/"的父链接也会被加上激活类，导致样式不符合预期。

不需要自定义复杂的路由监听逻辑，通过内置指令配置+模板状态绑定即可实现需求，且支持直接输入URL访问、浏览器前进后退等场景下的样式状态正确。

方案1：纯模板实现（适合子菜单数量少的场景） #

直接修改模板代码，通过routerLinkActive的精确匹配配置+模板引用变量获取子菜单激活状态，动态切换父级样式：

<nav class="menu-container">
    <div class="container" >
    <ul class="nav navbar-nav" >
        <a 
            id="parent" 
            routerLink="/" 
            routerLinkActive="router-class"
            [routerLinkActiveOptions]="{exact: true}"
            [class.router-class-other-style]="boxMenu.isActive || pageMenu.isActive"
        >
            PARENT Router
        </a>
        <li id="menu">
            <a 
                routerLink="/box" 
                routerLinkActive="router-class"
                #boxMenu="routerLinkActive"
            >
                BoxComponent-CHILD
            </a>
        </li>
        <li id="menu">
            <a 
                routerLink="/pageone" 
                routerLinkActive="router-class"
                #pageMenu="routerLinkActive"
            >
                Pageone-CHILD
            </a>
        </li>
    </ul>
    </div>
</nav>
<router-outlet></router-outlet>

核心逻辑说明：

• 父级链接添加[routerLinkActiveOptions]="{exact: true}"配置，开启精确匹配，只有当前URL完全等于/时才会添加router-class类，子路由激活时不会触发该类
• 两个子菜单的routerLinkActive指令导出为模板变量，父级链接通过判断子菜单的激活状态，只要任意一个子菜单处于激活状态，就自动添加router-class-other-style类
• 所有状态完全跟随Angular路由实际激活状态实时更新，无手动同步成本

现有路由配置不需要做任何修改即可正常生效。

方案2：组件类逻辑实现（适合子菜单数量多的场景） #

如果后续子路由数量较多，模板里逐个判断子菜单激活状态维护成本高，可以通过注入Router服务监听路由状态实现：

1. 先在对应组件类中添加路由状态判断逻辑：

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  isChildRouteActive = false;

  constructor(private router: Router) {
    // 初始化时校验当前路由层级
    this.checkIsChildRoute(this.router.url);
    // 监听路由跳转完成事件，更新状态
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      this.checkIsChildRoute(event.urlAfterRedirects);
    });
  }

  private checkIsChildRoute(url: string) {
    // 非根路径统一判定为子路由激活
    this.isChildRouteActive = url !== '/';
  }
}

2. 修改模板中父级链接的类绑定：

<a 
    id="parent" 
    routerLink="/" 
    routerLinkActive="router-class"
    [routerLinkActiveOptions]="{exact: true}"
    [class.router-class-other-style]="isChildRouteActive"
>
    PARENT Router
</a>
<!-- 子菜单部分保持原有写法即可，不需要额外导出变量 -->
<li id="menu"><a routerLink="/box" routerLinkActive="router-class">BoxComponent-CHILD</a></li>
<li id="menu"><a routerLink="/pageone" routerLinkActive="router-class">Pageone-CHILD</a></li>

后续新增子路由时不需要修改判断逻辑，维护成本更低。

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