routerLinkActive remain active even when other link is clicked

Question

<ul>
 <li routerLinkActive="active"><a routerLink="/">One</a></li>
 <li routerLinkActive="active"><a routerLink="/somewhere">Two</a></li>
</ul>

The problem with is, that when the Two link is clicked, the active class applied to both links - the One link remain highlighted... Why is this happening, please?

Answer 1

Add [routerLinkActiveOptions]="{exact: true}"

<li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">

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