Navigate using url and ../ in Angular 5

Question

I have this in my html:

(click)="openAlbum($event, album.post_id)"

And in my ts:

 openAlbum(event, post_id) {
            this.router.navigate(['../my-albums/' + post_id]);
    }

I'm standing now in this url: http://localhost:4200/profile/username/photos

I expected the url become: http://localhost:4200/profile/username/my-albums

But the result: http://localhost:4200/my-albums

why don't you give full url in router navigate? like `this.router.navigate(['profile/username/my-albums/' + post_id]);` — Ebin Manuval, Oct 21 '18 at 10:48
Possible duplicate of [Navigate relative with Angular 2 Router (Version 3)](https://stackoverflow.com/questions/39124906/navigate-relative-with-angular-2-router-version-3) — Jota.Toledo, Oct 21 '18 at 14:59

score 0 · Answer 1 · answered Oct 21 '18 at 15:19

After the link parameters array, add an object with a relativeTo property set to the ActivatedRoute. The router then calculates the target URL based on the active route's location. You can try like this:

this.router.navigate(['../my-albums/' + post_id], { relativeTo: this.route });

Navigate using url and ../ in Angular 5

1 Answers1