30

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.

reveN
  • 552
  • 2
  • 8
  • 20
  • Almost ! try `this.router.navigate(["call", caller]);` –  Jun 29 '17 at 09:39
  • Doesnt work for me, Do I have to modify my RouterModule.forRoot? mine currently looks like: { path: 'call', component: CallComponent } – reveN Jun 29 '17 at 09: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) –  Jun 29 '17 at 09: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 Jun 29 '17 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 Jun 29 '17 at 10:19
  • In 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 Jun 29 '17 at 10:30

1 Answers1

50

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']);
}
  • 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 – reveN Jun 29 '17 at 10:32
  • 2
    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 ? –  Jun 29 '17 at 10:34
  • ive 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 Jun 29 '17 at 13:14
  • so I get all the caller information I want, but I want to use it inside the component, not the URL – reveN Jun 29 '17 at 13:15
  • 1
    Oh ! Then use either a service or a Parent-Child relation. route params aren't made for that. –  Jun 29 '17 at 13:21
  • Or maybe you can use the `ActivatedRoute.data` property, but I've never used it. [Find more here](https://angular.io/guide/router#activatedroute-the-one-stop-shop-for-route-information) –  Jun 29 '17 at 13:24
  • 7
    just for completeness, you also need to import Params from @angular/router – AARyuzakiKK Oct 31 '17 at 10:18
  • 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. – Lazar Đorđević Oct 21 '21 at 18:46
  • thanks!! only a detail, is necessary add Params: import { ActivatedRoute , Params} from '@angular/router'; – enraged Sep 28 '22 at 14:15