Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 712
SpaceBeers Avatar asked Jun 30 '16 19:06

SpaceBeers


People also ask

What is Angular navigate router?

In Angular, RouterLink is a directive for navigating to a different route declaratively. Router. navigate and Router. navigateByURL are two methods available to the Router class to navigate imperatively in your component classes. Let's explore how to use RouterLink , Router.

What is the difference between navigate and navigateByURL?

difference between the two navigateByUrl is similar to changing the location bar directly–we are providing the “whole” new URL. Whereas router. navigate creates a new URL by applying an array of passed-in commands, a patch, to the current URL.

What is the difference between routing and navigation in Angular?

Angular provides extensive set of navigation feature to accommodate simple scenario to complex scenario. The process of defining navigation element and the corresponding view is called Routing. Angular provides a separate module, RouterModule to set up the navigation in the Angular application.


1 Answers

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

  • https://github.com/angular/angular.io/blob/c61d8195f3b63c3e03bf2a3c12ef2596796c741d/public/docs/_examples/router/ts/app/crisis-center/crisis-detail.component.1.ts#L108
  • https://github.com/angular/angular/issues/9476
like image 93
Günter Zöchbauer Avatar answered Sep 19 '22 11:09

Günter Zöchbauer