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.

Answer 1

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']);
}