web-dev-qa-db-ja.com

Angular 6）のクエリパラメータで "routerLinkActive"を使用する方法

Angularに問題があります。3つのリンクがあり、そのうちの1つにクエリパラメータがあります（リゾルバを使用しているため）。最初と3番目のリンクをクリックすると、routerLinkActiveが設定されます。 2番目のリンクをクリックすると、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>
angularparametersroutingrouterlinkactive
10
Sebastian S

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;
}
10
Suresh Kumar Ariya

非表示のアンカータグと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>
1
Cameron Burger