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并根据活动状态的布尔值添加类。这是一个小片段供参考。 ＆lt; li routerLinkActive＃rla =“routerLinkActive”＆gt;     ＆lt; a [routerLink] =“['/ log-in']”＆gt;         登入         ＆lt; i * ngIf =“rla.isActive”class =“fa fa-circle”aria-hidden =“true”＆gt;＆lt; / i＆gt;     ＆LT; / A＆GT; ＆LT; /锂＆GT; 当路线匹配时，您应该看到与登录文本一致的黑色圆圈。希望这可以解决您的问题。