Angular 2 router.navigate

Question

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.

Günter Zöchbauer · Accepted Answer · 2017-12-17 07:44:47Z

117

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})

4 Comments

Viking22 Over a year ago

Know this thread is old - but a couple of quick questions for my understanding: 1. In the 2nd case above shouldn't it be this.router.navigate(**['foo**-content', 'bar-contents',.... (without the / at the beginning of first segment, since it is relative) 2. Apart from this.currentActivatedRoute what are the other possible values for relativeTo?

Günter Zöchbauer Over a year ago

If you want it to be relative, then omit the leading /, I didn't intend that. Any route you want the path be relative to.

Viking22 Over a year ago

Thanks - but in your reply you have mentioned that if the first segment starts with a /, then it is an absolute navigation. So why would the relativeTo be required?

Günter Zöchbauer Over a year ago

Now I see what you mean. relativeTo makes only sense with a relative route. Thanks for pointing that out.

yala ramesh · Accepted Answer · 2017-12-23 09:53:12Z

17

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

edited Dec 23, 2017 at 9:53

answered Feb 7, 2017 at 18:32

yala ramesh

3,3901 gold badge25 silver badges37 bronze badges

Comments

River · Accepted Answer · 2022-02-28 21:49:07Z

2

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

<button (click)=return()>Home

edited Feb 28, 2022 at 21:49

River

9,20115 gold badges57 silver badges69 bronze badges

answered Jun 10, 2021 at 9:42

Shivaram Tolanur

772 bronze badges

Collectives™ on Stack Overflow

Angular 2 router.navigate

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related