使用skipLocationChange导航时Angular routerLinkActive失效问题

核心原因 #

routerLinkActive 的判断依据不是浏览器地址栏的URL，而是Angular内部维护的RouterState（当前激活的路由状态）。

当你使用skipLocationChange: true导航时，浏览器地址栏不会更新，但Angular内部的路由状态已经切换到了/b。此时routerLinkActive会对比当前激活的路由路径（/b）与routerLink指定的路径（../a，最终解析为/a），两者不匹配，所以不会应用is-active类。

解决方案 #

如果需要在这种场景下保持/a对应的导航项激活状态，可以用以下两种方式实现：

1. 手动控制激活类 #

通过监听路由事件，结合导航时的skipLocationChange标记，手动管理导航项的is-active类：

首先在导航栏组件中定义变量并监听路由：

isActive = false;

constructor(private router: Router) {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      // 直接以地址栏URL作为判断依据
      this.isActive = this.router.url === '/a';
    }
  });
}

然后在模板中绑定类：

<li
  [class.is-active]="isActive"
  class="BottomBar-menuItem"
>
  <a routerLink="../a">A</a>
</li>

2. 自定义路由激活指令 #

封装一个自定义指令，直接以浏览器地址栏URL作为判断标准，适配skipLocationChange的场景：

import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Directive({
  selector: '[urlBasedRouterLinkActive]'
})
export class UrlBasedRouterLinkActiveDirective implements OnInit {
  @Input() urlBasedRouterLinkActive: string;
  @Input() targetRouterLink: string;

  constructor(private el: ElementRef, private router: Router) {}

  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // 解析目标路径并与地址栏URL对比
        const targetUrl = this.router.parseUrl(this.targetRouterLink).toString();
        const currentUrl = this.router.url;
        
        if (currentUrl === targetUrl) {
          this.el.nativeElement.classList.add(this.urlBasedRouterLinkActive);
        } else {
          this.el.nativeElement.classList.remove(this.urlBasedRouterLinkActive);
        }
      }
    });
  }
}

使用时替换原有的routerLinkActive：

<li
  [targetRouterLink]="'../a'"
  urlBasedRouterLinkActive="is-active"
  class="BottomBar-menuItem"
>
  <a routerLink="../a">A</a>
</li>

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