角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>

当路线匹配的时候，你应该看到一个黑色的圆圈与文字中的符号相一致，希望这能解决你的问题。