Navigate to last visited child route when entering parent route Angular 5

Question

In my Angular 5 application I have my router configured as this:

{
        path: 'system-variables',
        component: SystemVariablesComponent,
        children: [
          {
            path: '',
            redirectTo: 'partners-variables',
            pathMatch: 'full'
          },
          {
            path: 'partners-variables',
            component: PartnersVariablesComponent,
            children: [
              {
                path: '',
                redirectTo: 'partners-branches',
                pathMatch: 'full'
              },
              {
                path: 'partners-branches',
                component: PartnersBranchesComponent,
                children: [
                  {
                    path: '',
                    redirectTo: 'register-partners-branches',
                    pathMatch: 'full'
                  },
                  {
                    path: 'register-partners-branches',
                    component: RegisterPartnersBranchesComponent
                  },
                  {
                    path: 'registered-partners-branches',
                    component: RegisteredPartnersBranchesComponent
                  }
                ]
              },
              {
                path: 'partners-stores-categories',
                component: PartnersStoresCategoriesComponent,
                children: [
                  {
                    path: '',
                    redirectTo: 'register-partners-stores-categories',
                    pathMatch: 'full'
                  },
                  {
                    path: 'register-partners-stores-categories',
                    component: RegisterPartnersStoresCategoriesComponent
                  },
                  {
                    path: 'registered-partners-stores-categories',
                    component: RegisteredPartnersStoresCategoriesComponent
                  }
                ]
              }
            ]
          }
        ]

As you can see, when I access '/' I'm redirected to '/partners-variables', that redirects to '/partners-variables/partners-branches' and then to '/partners-variables/partners-branches/register-partners-branches'.

Inside this nested set of child routes it's possible to navigate to multiple different paths, and this code is only a portion of my whole application.

What I'm trying to do is to load the last visited child route when a parent component is revisited.

For example, if I visit: '/partners-variables/partners-branches/register-partners-branches' and then I change the child route to: '/partners-variables/partners-branches/registered-partners-branches' and then I change the parent route to: '/partners-variables/partners-stores-categories' and finally back again to: '/partners-variables/partners-branches', by default (route config) it would redirect me to: '/partners-variables/partners-branches/register-partners-branches' but my last visited route inside the '/partners-variables/partners-branches' parent route was the '.../registered-partners-branches' child route, and I'd like to recover it.

Does Angular 5 provide any built in functionality to do it? I could create it manually subscribing to route change events and store my last visited child routes in memory, but before doing it I"d like to know if this is possible within Angular itself.

I'm not trying to keep my whole components in memory, nothing linke routeReuseStrategy, just to keep track of my last visited child routes for all parent routes.

Thanks!

Kapcash Kapcash · Accepted Answer · 2018-04-11T11:33:45

I don't know if it's natively possible to do it with the router configuration.

But you could create a service, used in each routed component, to store the matched route url.
Then, on the ngOnInit() of each parent component, call the service to retrieve the last stored child url and manually route to this one.

In RegisterPartnersBranchesComponent:

ngOnInit() {
  this.myservice.storeRoute(this.router.url);
}

In the parent components like PartnersBranchesComponent:

ngOnInit() {
  // if you have to redirect (or everytime)
  if (this.router.url === '/partners-variables/partners-branches') {
     this.router.navigateByUrl(this.myservice.lastRoute);
  }
}

You'll maybe have to declare the service as a singleton with forRoot() in your module.

Navigate to last visited child route when entering parent route Angular 5

1 Answers