SpaceBeers SpaceBeers - 8 days ago 5
Javascript Question

Angular 2 router.navigate

I'm trying to navigate to a route in Angular 2 with a mix of route and query parameters.

Here is an example route where the route is the last part of the path:

{ path: ':foo/:bar/:baz/page', component: AComponent }


Attempting to link using the array like so:

this.router.navigate(['foo-content', 'bar-contents', 'baz-content', 'page'], this.params.queryParams)


I'm not getting any errors and from what I can understand this should work.

The Angular 2 docs (at the moment) have the following as an example:

{ path: 'hero/:id', component: HeroDetailComponent }

['/hero', hero.id] // { 15 }


Can anyone see where I'm going wrong? I'm on router 3.

Answer

If the first segment doesn't start with / it is a relative route. router.navigate needs a relativeTo parameter for relative navigation

Either you make the route absolute:

this.router.navigate(['/foo-content', 'bar-contents', 'baz-content', 'page'], this.params.queryParams)

or you pass relativeTo

this.router.navigate(['/foo-content', 'bar-contents', 'baz-content', 'page'], {queryParams: this.params.queryParams, relativeTo: this.currentActivatedRoute})

See also

Comments