Adding Parameter to Angular router.navigate

Question

First of all, I am not sure if this is the right way, to achieve what I want.. I am trying to add an export binding like the following to a router.navigate()-method:

<call [caller]="caller"></call>

The problem is that I never use the directive, but instead adress it through a router:

acceptCall() {
   this.router.navigate(["call"]);
}

How can I achieve the same export binding from the first example in the acceptCall()-method? I Have already added an Input() variable and tried it with queryParams like this:

@Input() caller: Caller;
acceptCall(caller) {
    this.router.navigate(["call"], {queryParams: caller});
}

But this does not work.

Doesnt work for me, Do I have to modify my RouterModule.forRoot? mine currently looks like: { path: 'call', component: CallComponent } — reveN
– reveN, Commented Jun 29, 2017 at 9:51
Well yes, {path: 'call/:caller'} and you can get it with this.route.params.subscribe((params: Params) => this.myParam = params['caller']); in your subcomponent (route is an ActivatedRoute) — user4676340
– user4676340, Commented Jun 29, 2017 at 9:57
I have updated my module, but dont quite get the other stuff :D Where do you declare Params , myParam? could you maybe provide a full code example of the class as an answer? — reveN
– reveN, Commented Jun 29, 2017 at 10:06
@reveN: it's not very obvious how your code is organized. It would be easier to help you if you said clearly where all the bits of code you provided are located. — AngularChef
– AngularChef, Commented Jun 29, 2017 at 10:19

user4676340 · Accepted Answer · 2017-06-29 10:10:56Z

60

Following my comments you have to :

1 - Redefine your route

{path: 'call/:caller', component: MyComponent }

2 - Change your navigation in the parent component

this.router.navigate(["call", caller]);

3 - In the child component, get the param

import { ActivatedRoute } from '@angular/router';
// code until ...
myParam: string;
constructor(private route: ActivatedRoute) {}
// code until ...
ngOnInit() {
    this.route.params.subscribe((params: Params) => this.myParam = params['caller']);
}

answered Jun 29, 2017 at 10:10

user4676340

Sign up to request clarification or add additional context in comments.

9 Comments

reveN Over a year ago

mhh Ive done everything exactly as you said, but my router roots now back to my "home"-component instead of the call-component, when I call the method

user4676340 Over a year ago

I used calls like this.router.navigate(['../user', id], { relativeTo: this.route }); to be sure that it would redirect to the right url. Could you try it ?

user4676340 Over a year ago

Oh ! Then use either a service or a Parent-Child relation. route params aren't made for that.

AARyuzakiKK Over a year ago

just for completeness, you also need to import Params from @angular/router

Lazar Đorđević Over a year ago

Coment with this.router.navigate(['../user', id], { relativeTo: this.route }); helped me (I used ActivatedRoute for router ). It will be good to be included in answer.

|

Collectives™ on Stack Overflow

Adding Parameter to Angular router.navigate

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related