如何使用"routerLinkActive"； Angular 6中的查询参数? [英] How to use "routerLinkActive" with query params in Angular 6?

问题描述

我在Angular中遇到问题:我有三个链接，其中一个具有查询参数(由于使用了解析器).如果单击第一个和第三个链接，则会设置routerLinkActive.如果单击第二个链接，也会设置routerLinkActive.但是，如果我更改了组件routerLinkActive内部的查询参数，则会设置为未设置.

I have a problem in Angular: I have three links, one of them has query params (due to using a resolver). If I click the first and the third link, the routerLinkActive is set. If I click the second link routerLinkActive is set too. But if I change the query parameter inside the component routerLinkActive gets unset.

因此，我需要忽略查询参数.但是它是如何工作的呢?谁能帮我吗?

So, I need to ignore the query params. But how does it work? Can anyone help me?

这是我的简单代码:

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

推荐答案

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

RouteLinkActive will work only with exact query params. You may try passing {exact: false} as routerLinkActiveOptions. If that doesn't work

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

You can call a function inside [class.active] attributes.

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

这篇关于如何使用"routerLinkActive"； Angular 6中的查询参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！