Angular2, relative navigation (two levels back ../

Question

I have a back button in my application, which navigates relatively some levels back. In case of one level

this.router.navigate(['..'], { relativeTo: this.route });

it works perfectly (resulted route url:http://localhost:3000/three/two/one). In case of two level back rel. navigation

this.router.navigate(['..', '..'], { relativeTo: this.route });

router navigates two levels back, BUT the resulted route url looks now like http://localhost:3000/three/two/(tailing slash, which is not correct).

Am I doing something wrong or could it be a bug?

Answer 1

In case of two levels down use this:

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

Answer 2

Use the Location.back() method instead, Location.back() method takes you to the last page in your browsers history.

in your component:

import { Location }  from '@angular/common';
//some othe code ......
//in your class
constructor(private location: Location) {}

//create a method to go back
goBack() {
  this.location.back();
}

Now create a back button in your component.html and bind this method to it:

<button (click)="goBack()" > Back </button>