Hongbo Miao Hongbo Miao - 1 month ago 6
TypeScript Question

How to highlight when path exactly match '/'?

How to highlight when path exactly match

'/'
?

Right now even when I go to Page 2, the link Home is still highlight.

plunker

.active { color: red; }

<a routerLinkActive="active" routerLink="/">Home</a>
<a routerLinkActive="active" routerLink="/page2">Page 2</a>


routes:

export const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'page2', component: Page2Component },

{ path: '**', redirectTo: '' }
];


I tried to change to
path: '', component: HomeComponent, pathMatch: 'full'
, but it does not help.

Answer
<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">

https://angular.io/docs/ts/latest/api/router/index/RouterLinkActive-directive.html

Comments