How to navigate to pages that only differ by url param?

Question

I have a child component that can be reached from the parent with

 this.router.navigate(['./pathtochild/0'],{ relativeTo:
 this.activatedRoute });

this child has then links to siblings of the form /pathtochild/1, /pathtochild/2, etc.

Because these children only differ in the param number, it seems that

 this.router.navigate(['./pathtochild/1'],{ relativeTo: this.activatedRoute });

will not re-render the child view when only the param changes (but not the main path).

How can I navigate from one child to one of its siblings?

Answer 1

You need to move up a level and then route to another child id. Should look like this:

this.router.navigate(['../1'], { relativeTo: this.activatedRoute });