angular - 如何在Angular 6中将“routerLinkActive”与查询参数一起使用？

我在角度上有个问题：我有三个链接，其中一个有查询参数（由于使用了解析器）。如果单击第一个和第三个链接，则设置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>

最佳答案

RouteLink活动将只对精确的查询参数起作用。您可以尝试将{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;
}

关于angular - 如何在Angular 6中将“routerLinkActive”与查询参数一起使用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52037979/