Search code examples
angulartypescriptangular2-routing

Navigate relative with Angular 2 Router (Version 3)

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.

Solution

  • 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.

    Update 2016-10-12

    There is another stackoverflow question as well:

    Update 2016-10-24

    Documentation:

    Update 2019-03-08

    It seems that there were changes in Angular 7.1. There is an answer in another post how to solve it with Angular 7.1. Please refer to https://stackoverflow.com/a/38634440/42659.