angular2's routerLinkActive directive adds style class when routing is activated
.red{
color: red;
}
<a routerLink="/user/login" routerLinkActive="red">login</a>
When the url is user or /user/login, the a tag will be classred. When the url changes to something else, the class will be removed.
How to add two classes
<a routerLink="/user/login" routerLinkActive="class1 class2">login</a>
Two ways to write routerLinkActive
<a routerLink="/user/login" routerLinkActive="class1 class2">login</a> <a routerLink="/user/login" [routerLinkActive]="['class1', 'class2']">login</a>
You can also configure parameters for routerLinkActive
Passing exact: true means that the route is highlighted only when it matches exactly, such as
<a routerLink="/user/login" routerLinkActive="red" [routerLinkActiveOptions]="{exact: true}">login</a>
Use isActive to check whether the route is currently active.
<a routerLink="/user/login" routerLinkActive #rla="routerLinkActive">
login {{ ? 'activation' : 'Not activated'}}
</a>
If the current route is activated, login activation will be displayed
Inactive status
login not activated
The above rla is the abbreviation of routerLinkActive, which can be defined at will.
Here's the point: Use the RouterLinkActive directive on the parent element of the routerLink element
Is it troublesome to add styles to each route? Adding a route highlighting directive to its parent element will solve the problem!
<div routerLinkActive="red" [routerLinkActiveOptions]="{exact: true}">
<a routerLink="/user/login">login</a>
<a routerLink="/user/reset">reset</a>
</div>
Just add routerLinkActive and routerLinkActiveOptions to the parent element div of a tag, and the dom element in which it is located is added to the red style respectively when the route is /user/login or /user/reset. It should be noted here that you need to add routerLinkActiveOptions to specify the exact match, otherwise when the URL is user, both routes are matched and added red styles.
Summarize
The above is the routerLinkActive command for angular2 router introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!