Angular - routerLinkActive 和 queryParams 处理

Question

2021 年 3 月更新

Angular 团队最终为此合并了 PR，您可以查看 https://github.com/angular/angular/pull/40303了解更多详情。

要使用它，简单的说

<div routerLinkActive="active-link" [routerLinkActiveOptions]="options">
</div>

options 将具有 IsActiveMatchOptions 的形状

export declare interface IsActiveMatchOptions {
    fragment: 'exact' | 'ignored';
    matrixParams: 'exact' | 'subset' | 'ignored';
    paths: 'exact' | 'subset';
    queryParams: 'exact' | 'subset' | 'ignored';
}

或者简单地接受一个 bool 值 exact

{
   exact: boolean
}

原始问题

我在 Angular 中使用 routerLink 如下所示

<li routerLinkActive="active">
    <a [routerLink]="['/view', 10]"                 
       [queryParams]="{'offset': 0, 'numberOfItems': 100}" 
       queryParamsHandling="merge">
        <div>View</div>
        <div><span class="badge" [innerHtml]="viewCount"></span></div>
    </a>
</li>

所以当 URL 看起来像这样时，.active 类被添加到 li 标签中

/view/10?offset=0&numberOfItems=100

如果 URL 被更改 offset 或 numberOfItems 为不同的值，.active 类将被删除，例如。

/view/10?offset=0&numberOfItems=120

我浏览了 angular docs并设法通过添加另一个 routerLink 使其工作，但如下所示将其隐藏。

<li routerLinkActive="active">
    <a [routerLink]="['/view', 10]"                 
       [queryParams]="{'offset': 0, 'numberOfItems': 100}" 
       queryParamsHandling="merge">
        <div>View</div>
        <div><span class="badge" [innerHtml]="viewCount"></span></div>
    </a>
    <a [routerLink]="['/view', 10]" style="display:none;">                
        <div><span class="badge" [innerHtml]="viewCount"></span></div>
    </a>
</li>

上面的方法似乎有点hack。当路由器参数带有可选查询参数时，我可以设置任何配置以使 routerLinkActive 工作吗？

Answer 1

我遇到了同样的问题，但看起来这是设计使然 https://github.com/angular/angular/issues/13205

vsavkin 是路由器创建者。