Angular2 Selects 2 routes with routerLinkActive

Question

I have 2 routes

{ path: '', component: DefaultComponent },
{ path: 'second', component: SecondComponent }

And in html

<a [routerLink]="['/']" [routerLinkActive]="['active']">default</a>
<a [routerLink]="['/second']" [routerLinkActive]="['active']">second</a>

When I navigate to the second one both of them have active class. Is this a bug or a wanted

Using:

    "@angular/router": "~3.3.0",

user1664823 · Accepted Answer · 2016-12-24 11:39:09Z

1

You can achieve what you expect when you add pathMatch: 'full' to your route config:

{ path: '', component: DefaultComponent, pathMatch: 'full' },
{ path: 'second', component: SecondComponent }

Then the first route will just activate if the complete path is matching, not only if a part of the path is matching.

See: Routing & Navigation

answered Dec 24, 2016 at 11:39

user1664823

1014 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

xsh.7 · Accepted Answer · 2016-12-24 11:44:31Z

0

You have to set the [routerLinkActiveOptions]="{exact: true}" attribute, to match the exact path as mentioned in the docs for RouterLinkActive.

If you're setting {exact: true} the router is checking for path equality (equalSegmentGroups()), otherwise it's just checking for partial segments (containsSegmentGroup()).

See: @angular/router/src/url_tree.ts#L17

answered Dec 24, 2016 at 11:44

xsh.7

6,2701 gold badge25 silver badges26 bronze badges

Collectives™ on Stack Overflow

Angular2 Selects 2 routes with routerLinkActive

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related