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> 

當路由匹配，你應該看到符合註冊的文本中的黑圈，希望這能解決你的問題。