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> 

当路由匹配，你应该看到符合注册的文本中的黑圈，希望这能解决你的问题。