Angular 2 routerLinkActive

Question

所以，我明白了如何使用传统意义上的RouterLink和RouterLinkActive。定义需要应用的类非常容易，但我很好奇您是否能够使用 RouterLinkActive 实际上 show/hide 一个元素。

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

路线匹配后，您应该会看到与登录文本一致的黑色圆圈。希望这能解决您的问题。

Angular 2 routerLinkActive

Angular 2 routerLinkActive

angular2-routing

angular