Angular 5.0.4：添加queryParamsHandling="preserve"后routerLinkActive失效

在Angular 5.0.4中，routerLinkActive的默认匹配逻辑会严格对比路由的完整路径（包括查询参数）。当你添加queryParamsHandling="preserve"后，跳转后的URL会保留原有的查询参数，但你的routerLink配置里并没有包含这些查询参数，导致routerLinkActive判定当前路由和routerLink的配置不匹配，所以不会给按钮添加active类。

这里有两种实用的解决办法，你可以根据自己的场景选择：

方法1：让routerLink携带当前查询参数 #

通过ActivatedRoute获取当前的查询参数，绑定到routerLink的queryParams属性上，这样routerLink生成的URL就会和当前URL的查询参数一致，routerLinkActive就能正常匹配了。

模板代码： #

<div class="btn-group">
  <a class="btn btn-secondary"
     [routerLink]="['/your-path-1']"
     [queryParams]="route.queryParams"
     queryParamsHandling="preserve"
     routerLinkActive="active">
    按钮1
  </a>
  <a class="btn btn-secondary"
     [routerLink]="['/your-path-2']"
     [queryParams]="route.queryParams"
     queryParamsHandling="preserve"
     routerLinkActive="active">
    按钮2
  </a>
</div>

组件代码： #

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

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  constructor(public route: ActivatedRoute) {}
}

方法2：自定义匹配逻辑忽略查询参数 #

如果不需要匹配查询参数，可以自定义一个匹配函数，让routerLinkActive只对比路由的路径部分，忽略查询参数的差异。

组件代码： #

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

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  constructor(private router: Router) {}

  // 自定义路由匹配函数
  routePathMatcher(url: UrlTree): boolean {
    const currentUrl = this.router.parseUrl(this.router.url);
    // 只对比路径部分，忽略查询参数
    return url.path === currentUrl.path;
  }
}

模板代码： #

<div class="btn-group">
  <a class="btn btn-secondary"
     [routerLink]="['/your-path-1']"
     queryParamsHandling="preserve"
     [routerLinkActive]="['active']"
     [routerLinkActiveOptions]="{ matcher: routePathMatcher }">
    按钮1
  </a>
  <a class="btn btn-secondary"
     [routerLink]="['/your-path-2']"
     queryParamsHandling="preserve"
     [routerLinkActive]="['active']"
     [routerLinkActiveOptions]="{ matcher: routePathMatcher }">
    按钮2
  </a>
</div>

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