Angular 2 routerLinkActive

Question

因此，我了解了傳統意義上的如何使用RouterLink和RouterLinkActive。 定義需要應用的類非常容易，但是我很好奇您是否能夠使用RouterLinkActive來實際顯示/隱藏元素。

<div class="btn-group btn-group-justified toggle-nav">
  <div class="btn-group">
    <button type="button" role="link" class="btn btn-default btn-lg" routerLink="/log-in" routerLinkActive="btn-primary text-bold">Sign In</button>
  </div>
</div>

我希望在所選路線的按鈕文本旁邊顯示一個超棒的字體圖標（這是一個按鈕組）。 預先感謝您的幫助。 ：]

Answer 1

您可以使用localRef並根據活動狀態的布爾值添加類。 這是供參考的小片段。

<li routerLinkActive #rla="routerLinkActive">
    <a [routerLink]="['/log-in']">
        Sign In 
        <i *ngIf="rla.isActive" class="fa fa-circle" aria-hidden="true"></i>
    </a>
</li>

匹配路線后，您應該會在“登錄文本”中看到一個黑圈，希望這可以解決您的問題。