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.

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

import { ActivatedRoute } from '@angular/router';

export class ClassName {
  
  private router = ActivatedRoute;

    constructor(r: ActivatedRoute) {
        this.router =r;
    }

onSuccess() {
     this.router.navigate(['/user_invitation'],
         {queryParams: {email: loginEmail, code: userCode}});
}

}

Get this values:

ngOnInit() { this.route .queryParams .subscribe(params => { let code = params['code']; let userEmail = params['email']; }); }

Ref: https://angular.io/docs/ts/latest/api/router/index/NavigationExtras-interface.html

As simpler as

import { Router } from '@angular/router';

constructor( private router:Router) {}

    return(){this.router.navigate(['/','input']);}

Here you will be redirecting to route input . If you wish to go to particular path with relative to some path then.

return(){this.router.navigate(['/relative','input']);}

Here on return() is the method we will be triggered on a button click

Home