Adding Parameter to Angular router.navigate
71,458
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']);
}
Related videos on Youtube
Comments
-
reveN almost 4 years
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.
-
Admin almost 7 yearsAlmost ! try
this.router.navigate(["call", caller]);
-
reveN almost 7 yearsDoesnt work for me, Do I have to modify my RouterModule.forRoot? mine currently looks like: { path: 'call', component: CallComponent }
-
Admin almost 7 yearsWell yes,
{path: 'call/:caller'}
and you can get it withthis.route.params.subscribe((params: Params) => this.myParam = params['caller']);
in your subcomponent (route is an ActivatedRoute) -
reveN almost 7 yearsI 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?
-
AngularChef almost 7 years@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.
-
reveN almost 7 yearsIn my app.module.ts I got my RouterModule with {path ....} In my parent.component I Import my Caller Object and want to inject it with the acceptCall-method to my child.component.ts, where I want to use the Caller object to get for example the phonenumber and the name of the caller
-
-
reveN almost 7 yearsmhh 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
-
Admin almost 7 yearsI 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 ? -
reveN almost 7 yearsive created a mock caller and get the following error: Error: Cannot match any routes. URL Segment: 'call;Id=1;Name=Frodo%20Baggins;Tel=12345%2F678910;Company=The%20Fellowship%20of%20the%20Ring'
-
reveN almost 7 yearsso I get all the caller information I want, but I want to use it inside the component, not the URL
-
Admin almost 7 yearsOh ! Then use either a service or a Parent-Child relation. route params aren't made for that.
-
Admin almost 7 yearsOr maybe you can use the
ActivatedRoute.data
property, but I've never used it. Find more here -
AARyuzakiKK over 6 yearsjust for completeness, you also need to import Params from @angular/router
-
Lazar Đorđević over 2 yearsComent with
this.router.navigate(['../user', id], { relativeTo: this.route });
helped me (I usedActivatedRoute
forrouter
). It will be good to be included in answer.