Angular 2 routerLinkActive [英] Angular 2 routerLinkActive
问题描述
因此,我了解了传统意义上的如何使用RouterLink和RouterLinkActive.定义需要应用的类非常容易,但是我很好奇您是否能够使用RouterLinkActive来实际显示/隐藏元素.
So, I understand how to use RouterLink and RouterLinkActive in the traditional sense. It's pretty easy to define classes that need to be applied but I was curious if you're able to use RouterLinkActive to actually show/hide an element.
<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>
我想在所选路线的按钮文本旁边显示一个超棒的字体图标(这是一个按钮组).预先感谢您的帮助. :]
I'm looking to show a font awesome icon next to the button text for the selected route (it's a button group). Thank you in advance for the help. :]
推荐答案
您可以使用localRef并根据活动状态的布尔值添加类.这是供参考的小片段.
You can use the localRef and add classes based on the boolean value of the active state. Here is the small snippet for reference.
<li routerLinkActive #rla="routerLinkActive">
<a [routerLink]="['/log-in']">
Sign In
<i *ngIf="rla.isActive" class="fa fa-circle" aria-hidden="true"></i>
</a>
</li>
匹配路线后,您会在登录文本"中看到一个黑圈,希望能解决您的问题.
When the route is matched., you should see a dark circle in line with the Sign In Text., hope this solves your problem.
这篇关于Angular 2 routerLinkActive的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!