Why parent router is activated when navigating through child routes?

Issue

I have a simple application with nested router-outlet and my question is how can i disable "re-initialization" of the parent router-outlet while navigating child routes inside?

Right now I am animating my page changes (inside the custom router-outlet) but even when I am navigating through child pages my root page gets animated and it looks weird.

Any help would be appreciated :)

Solution

You can implement CanReuse

by adding

routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) { return true; }

You tell Angular to reuse the component when the route is updated (doesn't work if you route away from the component and back again.

Answered By - Günter Zöchbauer