web-dev-qa-db-ja.com

Angular2 routerLinkActiveがアクティブクラスを複数のリンクに設定する理由

アプリにrouterLinkActiveを実装しようとしていますが、クラスを複数のリンクにアクティブに設定するという問題に直面しています。これが私がやっている方法です

<ul class="nav nav-tabs">
  <li role="presentation" [routerLinkActive]="['active']"><a [routerLink]="['/']">Home</a></li>
  <li role="presentation" [routerLinkActive]="['active']"><a [routerLink]="['/about']">About</a></li>
  <li role="presentation" [routerLinkActive]="['active']"><a [routerLink]="['/contact']" >Contact Us</a></li>  
</ul>

ここにそれがどのように見えるかです

enter image description here ここでは、dev-toolsでの表示方法を示します enter image description here そして私のアドレスバー

enter image description here

angular docs で説明されているようにやっているため、何かが欠けていますか？.

angularrouterlinkactive
32
Jorawar Singh

以下のように[routerLinkActiveOptions]="{exact: true}"をHTMLに設定してください：

<ul class="nav nav-tabs">
  <li role="presentation" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><a [routerLink]="['/']">Home</a></li>
  <li role="presentation" routerLinkActive="active"><a [routerLink]="['/about']">About</a></li>
  <li role="presentation" routerLinkActive="active"><a [routerLink]="['/contact']" >Contact Us</a></li>  
</ul>

どのように機能しますか？

RouterLinkActiveは現在のルートをチャンクし、提供されたRouterLinksとその部分を一致させようとします。それを念頭に置いて、ルート/は他のすべてのルートのまさに親であるため、どこでも一致します（/aboutで構成される/contact、/など） + route-path）。単純化するために、これはバグではなく、複数のルートを一致させるためにアプリケーションで必要な機能である場合があります。これを防ぐには、routerLinkActiveOptionsを指定して、現在のルートに正確に一致させることができます。つまり、親ルートとは一致しませんが、この正確なルートに提供されたrouterLinkを見つけようとします。

93
ranakrunal9