Nested Routing Links Angular 4

Question

This is my current setup:

 - app (Folder)
  - app-routing.module.ts (File)
     - client (Folder)
         - client-routing.module.ts (File)
             - service (Folder)
                 - service-routing.module.ts (File)
                 - service1.componenent.ts (File)
                 - service2.componenent.ts (File)

So, right now if I use router.navigateByUrl inside service1.componenet I'll have to do it like this:

this.router.navigateByUrl('/client/service2');

I'll have to keep nesting routing-modules so knowing the "parents" of the route later on might be a problem, I wanted to know if there is a more efficient solution rather than copying the whole route, something like:

this.router.navigateByUrl( parentRoute + '/service2');

Where the parentRoute it's a compilation of the nested routes.

Jota.Toledo · Accepted Answer · 2017-08-11 16:54:27Z

2

You could try using the ActivatedRoute in the service1component. Something like this:

import { Router, ActivatedRoute } from '@angular/router';

@Component({
...
})
export class Service1Component {
 constructor(
   private _router:Router,
   private _route: ActivatedRoute
 ){}

 ...

  navigate(){
    this._router.navigate(['./service2'],{
      relativeTo: this._route
    });
  }
}

answered Aug 11, 2017 at 16:54

Jota.Toledo

28.6k11 gold badges66 silver badges76 bronze badges

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

Collectives™ on Stack Overflow

Nested Routing Links Angular 4

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related