Angular 2 routerLinkActive 對於基本路徑始終處於活動狀態

Question

我的導航欄有以下代碼：

<nav>
  <a [routerLink]="['/']" [routerLinkActive]="['nav-active']">HOME</a>
  <a [routerLink]="['/about']" [routerLinkActive]="['nav-active']">ABOUT</a>
  <a [routerLink]="['/records']" [routerLinkActive]="['nav-active']">RECORDS</a>
</nav>

問題是 HOME 導航點總是獲得類，因為 / 似乎總是處於活動狀態。 這可以通過一個小而簡單的解決方案來避免嗎？

謝謝您的幫助

編輯：

這是目前的解決方案：

[routerLinkActiveOptions]="{ 准確：真 }"

Answer 1

正如@TomRaine 在此答案中所建議的那樣，您可以將屬性[routerLinkActiveOptions]="{ exact: true }"添加到您的元素中：

<nav>
  <a [routerLink]="['/']" 
      [routerLinkActive]="['nav-active']"
      [routerLinkActiveOptions]="{ exact: true }">
    HOME
  </a>
  ...
</nav>

Answer 2

這似乎是一個已知問題。 此線程中詳細介紹了一些解決方法： https ://github.com/angular/angular/issues/8397

來自 Github 線程：

“您需要為您的 routerLink 添加一個附加選項。”

[routerLinkActiveOptions]="{ exact: true }"

然后，只有當您在確切的路線上時，您的回家路線才會處於活動狀態。 具有空路徑的主路由將在所有路由上部分匹配

Answer 3

你可以這樣做：

<button routerLink="/" [routerLinkActiveOptions]="{ exact: true }" routerLinkActive="nav-button-active"
                mat-button mat-raised-button
                class="w-100 mb-3 nav-buttons">
          Dashboard
</button>

只需添加屬性[routerLinkActiveOptions]="{ exact: true }" 。