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

时间:2018-08-27 11:09:17

标签: angular parameters routing routerlinkactive

我在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>

2 个答案:

答案 0 :(得分:5)

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;
}

答案 1 :(得分:1)

使用隐藏的定位标记和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>