Navigate relative with Angular 2 Router (Version 3)

Question

How to navigate relative from

/questions/123/step1

to

/questions/123/step2

within a component using

Router

without string concatenation and specifying

/questions/123/

?

I've added an own answer below. Please feel free to suggest a better answer. ;-) I guess there are better approaches.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

After doing some more research I came across with

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

and

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

First approach (Router.createUrlTree API) did not work for me, i.e. nothing happened. Second approach (Router.navigate API) works.

However, second approach uses NavigationExtras (second argument) which is documented with @experimental. Hopefully there won't be big changes with the next release again... and NavigationExtras will be stable.

Any other suggestions/approaches, please do not hesitate to answer to my question above.

Update 2016-10-12

There is another stackoverflow question as well:

How do I navigate to a sibling route

Navigate relative with Angular 2 Router (Version 3)

Sign up