如何在 Angular 6 中使用带有查询参数的“routerLinkActive”？答案

【问题标题】：How to use "routerLinkActive" with query params in Angular 6?如何在 Angular 6 中使用带有查询参数的“routerLinkActive”？
【发布时间】：2019-02-01 21:55:01
【问题描述】：

我在 Angular 中有一个问题：我有三个链接，其中一个有查询参数（由于使用了解析器）。如果我单击第一个和第三个链接，则会设置 routerLinkActive。如果我单击第二个链接routerLinkActive 也已设置。但是如果我更改组件内的查询参数routerLinkActive 会被取消设置。

所以，我需要忽略查询参数。但它是如何工作的？谁能帮帮我？

这是我的简单代码：

<div class="col-12">
    <ul class="nav nav-pills nav-justified">
        <li class="nav-item">
            <a 
              class="nav-link" 
              routerLink="/einstellungen/allgemein"                             
              routerLinkActive="active">
              Allgemein
            </a>
        </li>
        <li class="nav-item">
            <a 
              class="nav-link" 
              [routerLink]="['/einstellungen/kalender']" 
              [queryParams]="{branch: myBranches[0].id}" 
              routerLinkActive="active"
              [routerLinkActiveOptions]="{exact: false}">
              Kalender verwalten
           </a>
        </li>
        <li class="nav-item">
            <a 
              class="nav-link" 
              *ngIf="user.is_admin" 
              routerLink="/einstellungen/filialen" 
              routerLinkActive="active">
              Filialen verwalten
            </a>
        </li>
    </ul>
</div>

【问题讨论】：

标签： angular parameters routing routerlinkactive

【解决方案1】：

RouteLinkActive 仅适用于精确的查询参数。您可以尝试将 {exact: false} 作为 routerLinkActiveOptions 传递。如果这不起作用

您可以在 [class.active] 属性中调用函数。

<a class="nav-link" [routerLink]="['/einstellungen/kalender']" [queryParams]="{branch: myBranches[0].id}" [class.active]="isLinkActive('/my-link')">Kalender verwalten</a>

isLinkActive(url): boolean {
   const queryParamsIndex = this.router.url.indexOf('?');
   const baseUrl = queryParamsIndex === -1 ? this.router.url : 
   this.router.url.slice(0, queryParamsIndex);
   return baseUrl === url;
}

【讨论】：

感谢您的帮助。不幸的是，这似乎有点麻烦。但它有效！
添加 [routerLinkActiveOptions]="{exact: false}" 对我有用。谢谢！

【解决方案2】：

使用隐藏的锚标记和 html 模板变量：

<a [routerLink]="/einstellungen/kalender" routerLinkActive="" #rla="routerLinkActive" hidden></a>
<a 
   class="nav-link" 
   [routerLink]="['/einstellungen/kalender']" 
   [queryParams]="{branch: myBranches[0].id}" 
   [class.active]="rla.isActive">
   Kalender verwalten
 </a>

【讨论】：

这行得通，谢谢。多一个链接怎么处理？我是否要为每个链接和多个 #rla（#rla1、#rla2 等）创建一个隐藏的 a？

【解决方案3】：

在component.ts：

withoutQueryParams$: Observable<boolean>;

ngOnInit() {
    this.withoutQueryParams$ = this.route.queryParams.pipe(
        map(params => Object.keys(params).length === 0)
    );
}

在template.html：

[routerLinkActiveOptions]="{ exact: withoutQueryParams$ | async }"

【讨论】：