RouterLinkActive doesn't work properly with children routes

[Qszer94]

[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see

Current behavior
Look at this Plunker.
When you choose one of four heroes HeroComponent is loaded. Inside its templete there is another <router-outlet> where you can navigate beetween HeroDetailComponent and HeroNameComponent components. HeroDetailComponent is loaded by default as it has path: '' in routing configuration but link 'Details" isn't mark as active.

When we navigate to 'Name' and then back to details by clicking 'Details' link - active class starts to be added.

Also when we are in HeroNameComponent and then we choose again active hero from list (only curently active hero) then details button is shown as acivated correctly .

Its seems to doesn't work especially when component is reused, without creating new instance.

Expected behavior
When clicking one of heroses, details button should be marked as active.

• Angular version: 2.2.3, also ~2.1.0

• Browser: [all ]

• Language: [TypeScript]

[mrVito]

I have exactly the same issue (only difference is that I have redirectTo on child route with path '')... Strange thing is that it was working (at least in my scenario) with angular 2.3.x but stopped working after update to 2.4.x and further (I'm on 2.4.8 now)...

[DzmitryShylovich]

@mrVito can you add a small plunkr that demonstrates the issue?

[raphaelluchini]

@DzmitryShylovich I'm having the same behaviour as @Qszer94 have mentioned.
I have the following setup:

{
...,
children: [{path: '', component: Child1Component}, {path: 'child2', component: Child2Component}]
}

and

<a routerLinkActive="active"  routerLink="/">Child1</a>
<a routerLinkActive="active"  routerLink="/child2">Child2</a>

When I'm at 'Child1', it's ok, but when I click on 'Child2', both links are active. I've tried [routerLinkActiveOptions]="{exact:true}" but I have query parameters on some routes, so It doesn't solve my problem.

[suresh2018]

me face this issue how to fix

[jasonaden]

I'm sorry but reported issues require a reproduction of the issue. We suggest using StackBlitz, Plunker or Github.

If this issue persists, please create a reproduction using one of the links above. Describe the difference between the expected and current behavior in a new issue with the reproduction linked.

---

The reproduction provided is very large. Not targeted to this issue. If this is still a problem, please create a small reproduction focused specifically on this issue.

[raphaelluchini]

@jasonaden I just created a reproduction of the issue:

http://plnkr.co/edit/SRGNtSklC8Id0zIrPLXB?p=preview

Steps to reproduce:
Click on Child 1 (link with queryParams) the link (Child1) is activated.
Click on Child 1 No Param (link without queryParams) the link (Child1) is not activated, it should be activated because on my understanding, query params should be optional, right?

Thanks
Rapha

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}